<template>
    <div id="subPage">
        <div class="subPage-left">
            <div class="item left_one">
                <div class="left_one_top">
                    <div class="left_one_top_icon">
                        <img src="../../assets/images/ags/index/project.png" />
                    </div>
                    <div class="left_one_top_title">项目概况</div>
                </div>
                <div class="left_one_center">
                    <div class="left_one_center_left">
                        <div class="left_one_center_money">
                            <span>{{ projectInfoObj.money || 0 }}</span>
                            <span>项目总造价：(单价/万元)</span>
                        </div>
                    </div>
                    <div class="left_one_center_line"></div>
                    <div class="left_one_center_right">
                        <div class="left_one_center_date">
                            <div :class="clientWidth < 1630 ? 'commencementDate adjust_width' : 'commencementDate'">
                                <div class="headline">开工时间：</div>
                                <div class="content">
                                    <span :class="clientWidth < 1630 ? 'scorllText' : ''"> {{ projectInfoObj.startDate }}</span>
                                </div>
                            </div>
                            <div :class="clientWidth < 1630 ? 'completionDate adjust_width' : 'completionDate margintx'">
                                <div class="headline2">竣工时间：</div>
                                <div class="content">
                                    <span :class="clientWidth < 1630 ? 'scorllText' : ''"> {{ projectInfoObj.completeDate }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left_one_bottom">
                    <vue-seamless-scroll style="width: 100%;overflow:hidden;height:90%" :data="projectInfoObj.unitList" :class-option="projectOption">
                        <div class="left_one_bottom_item" v-for="(item, index) in projectInfoObj.unitList" :key="index">
                            <div class="bc"></div>
                            <span style="color:#00f0ff">{{ item.type }}：</span>
                            <span style="color:#D1E9F7">{{ item.name }}</span>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
            <div class="item left_two">
                <div class="left_two_top pointer-events_cursor" @click.top="onjump('/emp/warn/record')">
                    <div class="left_two_top_icon">
                        <img src="../../assets/images/ags/index/warn.png" />
                    </div>
                    <div class="left_two_top_title">安全帽报警</div>
                </div>
                <div class="left_two_bottom">
                    <vue-seamless-scroll style="overflow:hidden;height:90%" ref="warpScroll" :data="warnList" :class-option="defaultOption">
                        <div class="left_two_bottom_item pointer-events_cursor" @click.top="onjump('/emp/warn/record')"
                            v-for="(item, index) in warnList" :key="index" v-if="item.moduleType != 4">
                            <div class="bc"></div>
                            <div class="left_two_bottom_title">{{ item.ruleTypeName }}</div>
                            <!-- <div class="left_two_bottom_date">{{item.triggerTime | dateFormat("YYYY/MM/DD  hh:mm")}}</div> -->
                            <div class="left_two_bottom_date">{{item.triggerTime || ''}}</div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
            <div class="item left_two">
                <div class="left_two_top pointer-events_cursor" @click.top="onjump('/fvs/warn/record')">
                    <div class="left_two_top_icon">
                        <img src="../../assets/images/ags/index/warn.png" />
                    </div>
                    <div class="left_two_top_title">视频报警</div>
                </div>
                <div class="left_two_bottom">
                    <vue-seamless-scroll style="overflow:hidden;height:90%" ref="warpScroll" :data="warnList" :class-option="defaultOption">
                        <div class="left_two_bottom_item pointer-events_cursor" @click.top="onjump('/fvs/warn/record')"
                            v-for="(item, index) in FimResultList" :key="index">
                            <div class="bc"></div>
                            <div class="left_two_bottom_title">{{ item.algCheckTypeName }}报警</div>
                            <div class="left_two_bottom_date">{{item.time || ''}}</div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>

            <!-- <div class="item left_three">
                <div class="left_three_top">
                    <div class="left_three_top_icon">
                        <img src="../../assets/images/ags/index/safety.png" />
                    </div>
                    <div class="left_three_top_title">{{ titleName }}</div>
                    <div v-for="(item, index) in qualityTabList" :key="index" class="item_tab" @click="getActiveItem(item)">
                        <img :src="qualityOrSafety == item.type ? item.icon_hover : item.icon" />
                    </div>
                </div>
                <div class="left_three_bottom" v-if="qualityOrSafety == 0">
                    <vue-seamless-scroll
                        :data="qualityRankList"
                        :class-option="defaultOption"
                        style="width: 100%;overflow:hidden;height:68%"
                    >
                        <div
                            class="left_three_item"
                            v-for="(item, index) in qualityRankList"
                            :key="index"
                            :style="[
                                { backgroundImage: 'url(' + item.icon + ')' }
                            ]"
                        >
                            <div class="left_three_first_rank">
                                NO.{{ index + 1 }}
                            </div>
                            <div class="left_three_first_type">
                                {{ item.issueTypeName }}
                            </div>
                            <div class="left_three_first_count">
                                {{ item.num }}项
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
                <div class="left_three_bottom" v-if="qualityOrSafety == 1">
                    <vue-seamless-scroll
                        :data="safetyRank"
                        :class-option="defaultOption"
                        style="width: 100%;overflow:hidden;height:68%"
                    >
                        <div
                            class="left_three_item"
                            v-for="(item, index) in safetyRank"
                            :key="index"
                            :style="[
                                { backgroundImage: 'url(' + item.icon + ')' }
                            ]"
                        >
                            <div class="left_three_first_rank">
                                NO.{{ index + 1 }}
                            </div>
                            <div class="left_three_first_type">
                                {{ item.issueTypeName }}
                            </div>
                            <div class="left_three_first_count">
                                {{ item.num }}项
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div> -->
        </div>
        <div :class="$store.state.boardMdTabActive === 1 ? 'center center1' : 'center'">
            <div :class="$store.state.boardMdTabActive === 1 ? 'top1' : 'top'">
                <div class="img" v-show="$store.state.boardMdTabActive === 2" ref="screenPre">
                    <div class="content">
                        <el-carousel indicator-position="none" :interval="3000" arrow="never">
                            <el-carousel-item v-for="item in imgList" :key="item.imgId">
                                <img :src="item.imgUrl" alt class="img" />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="img" v-show="$store.state.boardMdTabActive === 3">
                    <video v-show="!playModeFlag" ref="videoElement2" id="videoElement2" controls autoplay muted style="object-fit: fill;width:100%;height:100%;outline:none;overflow:hidden;"></video>
                    <div v-show="playModeFlag" ref="videoElement" id="videoElement" style="width: 100%;height: 100%;object-fit: fill;outline:none;"></div>
                    <div class="videoDeviceFlag" :style="[{ right: !videoDeviceFlag ? 0 : '-3rem' }]">
                        <div class="imgBtn" @click="videoDeviceFlag = !videoDeviceFlag">
                            <div v-show="videoDeviceFlag" class="el-icon-d-arrow-left icon"></div>
                            <div  v-show="!videoDeviceFlag"  class="el-icon-d-arrow-right icon"></div>
                            <!--<span>数据详情</span>-->
                        </div>
                        <div class="device-box">
                            <div class="device-list">
                                <div :class="['device-item']" v-for="(item, index) in videoDeviceList" :key="index" @click="getDeviceInfoFn(item)">
                                    <div class="name">{{ item.name }}</div>
                                    <img v-if="videoDeviceId === item.id" src="../../assets/images/ags/fvs/active-icon.png" class="active" />
                                    <div :class="['deviceStatus', item.deviceStatus === 1 ? 'green' : 'red']"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="img" v-show="$store.state.boardMdTabActive === 4"></div>
            </div>
            <div class="bottom">
                <div class="bottom_left_data">
                    <div class="bottom_left_item">
                        <div class="bottom_left_data_icon">
                            <img src="../../assets/images/ags/index/time.png" />
                        </div>
                        <div class="bottom_left_data_text">
                            <div class="bottom_left_data_count">{{ projectNum }}</div>
                            <div class="bottom_left_data_unit">项目倒计时/天</div>
                        </div>
                    </div>
                    <div class="bottom_left_line"></div>
                    <div class="bottom_left_item">
                        <div class="bottom_left_data_icon">
                            <img src="../../assets/images/ags/index/safe_day.png" />
                        </div>
                        <div class="bottom_left_data_text">
                            <div class="bottom_left_data_count">{{ projectInfoObj.safeDays }}</div>
                            <div class="bottom_left_data_unit">安全生产/天</div>
                        </div>
                    </div>
                    <div class="bottom_left_item">
                        <div class="bottom_left_data_icon">
                            <img src="../../assets/images/ags/index/peoples.png" />
                        </div>
                        <div class="bottom_left_data_text">
                            <!-- <div class="bottom_left_data_count">{{ empNum }}</div>
                            <div class="bottom_left_data_unit">在场人数/人</div> -->
                            <div class="bottom_left_data_count">{{ empTotal || 0 }}</div>
                            <div class="bottom_left_data_unit">在职人数/人</div>
                        </div>
                    </div>
                    <div class="bottom_left2_line"></div>
                    <div class="bottom_left_item">
                        <div class="bottom_left_data_icon">
                            <img src="../../assets/images/ags/index/equip_screen.png" />
                        </div>
                        <div class="bottom_left_data_text">
                            <div class="bottom_left_data_count"><!-- {{ deviceNum }} -->{{ machTypeCount }}</div>
                            <div class="bottom_left_data_unit">现场设备/台</div>
                        </div>
                    </div>
                </div>
                <div class="bottom_left_echart">
                    <div class="bottom_left_echart_top">
                        <div class="bottom_left_echart_icon"></div>
                        <div class="bottom_left_echart_title">{{ urgentName }}待整改问题</div>
                        <div class="tab_groups">
                            <div v-for="(item, index) in urgencyTabList" :key="index" class="item_tab" @click="getUrgencyItem(item)">
                                <img :src="urgencyTab == item.type ? item.icon_hover : item.icon" />
                            </div>
                        </div>
                    </div>
                    <div class="bottom_left_echart_bottom">
                        <div class="left_echart" v-if="urgentStatus != 0">
                            <div id="left_echart_chart"></div>
                            <div class="center_bg"></div>
                            <div class="left_echart_text">
                                <span class="text_1">紧急程度</span>
                                <span class="text_2">{{ urgentStatus }}</span>
                                <span class="text_3">项</span>
                            </div>
                        </div>
                        <div class="right_echart" v-if="problemStatus != 0">
                            <div id="right_echart_chart"></div>
                            <div class="right_echart_text">
                                <span class="text_1">问题状态</span>
                                <span class="text_2">{{ problemStatus }}</span>
                                <span class="text_3">项</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="subPage-right">
            <div class="item right_one itemDiv1">
                <div class="right_one_top">
                    <div class="right_one_top_icon pointer-events_cursor" @click.top="onjump('/env/dust/data')">
                        <img src="../../assets/images/ags/index/env.png" />
                        <div class="right_one_top_title">环境监测</div>
                    </div>
                    <div class="Dropdown">
                        <!-- <Dropdown @on-click="getEnvDeviceTypeFn">
                            <a href="javascript:void(0)" class="text">
                                {{ envDeviceName }}
                                <Icon type="ios-arrow-down" v-show="envDeviceList.length > 0"></Icon>
                            </a>
                            <DropdownMenu slot="list">
                                <DropdownItem
                                    :selected="item.id === envDeviceId"
                                    :name="item.id"
                                    v-for="item in envDeviceList"
                                    :key="item.id"
                                    >{{ item.name }}
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown> -->
                        <Dropdown @on-click="onEnvDeviceTypeFn">
                            <a href="javascript:void(0)" class="text">
                                {{ envDeviceList[envDeviceVal].name }}
                                <Icon type="ios-arrow-down" v-show="envDeviceList.length > 0"></Icon>
                            </a>
                            <DropdownMenu slot="list">
                                <DropdownItem
                                    :selected="item.value == envDeviceVal"
                                    :name="item.value"
                                    v-for="item in envDeviceList"
                                    :key="item.value"
                                    >{{ item.name }}
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </div>
                <div class="right_one_bottom pointer-events_cursor" @click.top="onjump('/env/dust/data')">
                    <div class="right_one_item" v-if="pmList.length != 0">
                        <div class="right_one_item_left">
                            <div class="right_one_item_icon">
                                <img src="../../assets/images/ags/index/pm.png" />
                            </div>
                            <div class="right_one_item_point">
                                <img src="../../assets/images/ags/index/point_one.png" />
                            </div>
                        </div>
                        <div class="right_one_item_right">
                            <div class="right_one_item_one" v-for="(item, index) in pmList" :key="index">
                                <div class="right_one_item_line" style="border-top: 2px solid #01dcfc;"></div>
                                <div class="right_one_item_count">
                                    <div class="right_one_item_value" style="font-size:0.19rem;color:#01dcfc;" v-if="envDeviceVal == 0">
                                        <!-- {{ item.num }} -->
                                        {{item.realTimeData ? item.realTimeData.value : '-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#01dcfc;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.X ? ('X:'+ item.realTimeData.X) : 'X:-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#01dcfc;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.Y ? ('Y:'+ item.realTimeData.Y) : 'Y:-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#01dcfc;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.Z ? ('Z:'+ item.realTimeData.Z) : 'Z:-'}}
                                    </div>
                                    <div class="right_one_item_unit">
                                        <span style="font-size:0.12rem;color:#bad4f4">{{ item.name }}</span>
                                        <span style="font-size:0.08rem;color:#6bc9ff;text-indent: 0.10rem;">{{ item.unit }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right_one_item" v-if="temList.length != 0">
                        <div class="right_one_item_left">
                            <div class="right_one_item_icon">
                                <img
                                    src="../../assets/images/ags/index/temperature.png"
                                    alt=""
                                />
                            </div>
                            <div class="right_one_item_point">
                                <img src="../../assets/images/ags/index/point_one.png" />
                            </div>
                        </div>
                        <div class="right_one_item_right">
                            <div class="right_one_item_one" v-for="(item, index) in temList" :key="index">
                                <div class="right_one_item_line" style="border-top: 2px solid #FFC0C0;"></div>
                                <div class="right_one_item_count">
                                    <div class="right_one_item_value" style="font-size:0.19rem;color:#FFC0C0" v-if="envDeviceVal == 0">
                                        <!-- {{ item.num }}{{ item.code == "noise" ? "" : item.unit }} -->
                                        {{item.realTimeData ? item.realTimeData.value : '-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#FFC0C0;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.X ? ('X:'+ item.realTimeData.X) : 'X:-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#FFC0C0;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.Y ? ('Y:'+ item.realTimeData.Y) : 'Y:-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#FFC0C0;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.Z ? ('Z:'+ item.realTimeData.Z) : 'Z:-'}}
                                    </div>
                                    <div class="right_one_item_unit">
                                        <span style="font-size:0.12rem;color:#bad4f4">{{ item.name }}</span>
                                        <span style="font-size:0.08rem;color:#6bc9ff;text-indent: 0.1rem;">{{item.code == "noise" ? item.unit : ""}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right_one_item" v-if="windList.length != 0">
                        <div class="right_one_item_left">
                            <div class="right_one_item_icon">
                                <img src="../../assets/images/ags/index/wind.png" />
                            </div>
                            <div class="right_one_item_point">
                                <img src="../../assets/images/ags/index/point_one.png" />
                            </div>
                        </div>
                        <div class="right_one_item_right">
                            <div class="right_one_item_one" v-for="(item, index) in windList" :key="index">
                                <div class="right_one_item_line" style="border-top: 2px solid #FFBD78;"></div>
                                <div class="right_one_item_count">
                                    <div class="right_one_item_value" v-if="envDeviceVal == 0" :style="[item.code == 'windDirection' ? {fontSize: '0.1rem',lineHeight: '28px',color: '#FFBD78'} : {fontSize: '0.19rem',color: '#FFBD78'}]">
                                        <!-- {{ item.num }} -->
                                        {{item.realTimeData ? item.realTimeData.value : '-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#FFBD78;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.X ? ('X:'+ item.realTimeData.X) : 'X:-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#FFBD78;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.Y ? ('Y:'+ item.realTimeData.Y) : 'Y:-'}}
                                    </div>
                                    <div class="right_one_item_value" style="font-size:0.15rem;color:#FFBD78;" v-if="envDeviceVal == 1">
                                        {{item.realTimeData.Z ? ('Z:'+ item.realTimeData.Z) : 'Z:-'}}
                                    </div>
                                    <div class="right_one_item_unit">
                                        <span style="font-size:0.12rem;color:#bad4f4" >{{ item.name }}</span>
                                        <span style="font-size:0.08rem;color:#6bc9ff;text-indent: 0.1rem;" >{{ item.unit }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item right_one itemDiv2">
                <div class="right_one_top">
                    <div class="right_one_top_icon pointer-events_cursor" @click.top="onjump('/env/gas/data')">
                        <img src="../../assets/images/ags/env/envc.png" />
                        <div class="right_one_top_title">气体监测</div>
                    </div>
                    <div class="Dropdown">
                        <Dropdown @on-click="onDustDeviceTypeFn">
                            <a href="javascript:void(0)" class="text">
                                {{ (DustDataList.find(item => item.id == DustDeviceVal) || {}).name || '' }}
                                <Icon type="ios-arrow-down" v-show="DustDataList.length > 0"></Icon>
                            </a>
                            <DropdownMenu slot="list">
                                <DropdownItem
                                    :selected="item.id == DustDeviceVal"
                                    :name="item.id"
                                    v-for="item in DustDataList"
                                    :key="item.id"
                                    >{{ item.name }}
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </div>
                <div class="right_one_bottom pointer-events_cursor right_rf" @click.top="onjump('/env/gas/data')">
                    <div class="right_one_item" v-if="latestData.length != 0">
                        <div class="right_one_item_left">
                            <div class="right_one_item_icon">
                                <img src="../../assets/images/ags/index/pm.png" />
                            </div>
                            <div class="right_one_item_point">
                                <img src="../../assets/images/ags/index/point_one.png" />
                            </div>
                        </div>
                        <div class="right_one_item_right">
                            <div class="right_one_item_one" style="width: 1.1rem;"    >
                                <div class="right_one_item_line" style="border-top: 2px solid #01dcfc;"></div>
                                <div class="right_one_item_count">
                                    <div class="right_one_item_value" style="font-size:0.19rem;color:#01dcfc;">
                                        {{ latestData.co }}
                                    </div>
                                    <div class="right_one_item_unit">
                                        <span style="font-size:0.12rem;color:#bad4f4">一氧化碳 CO</span>
                                        <span style="font-size:0.08rem;color:#6bc9ff;text-indent: 0.10rem;">ppm</span>
                                    </div>
                                </div>
                            </div>

                            <div class="right_one_item_one" style="width: 1.1rem;"    >
                                <div class="right_one_item_line" style="border-top: 2px solid #01dcfc;"></div>
                                <div class="right_one_item_count">
                                    <div class="right_one_item_value" style="font-size:0.19rem;color:#01dcfc;">
                                        {{ latestData.h2s }}
                                    </div>
                                    <div class="right_one_item_unit">
                                        <span style="font-size:0.12rem;color:#bad4f4">硫化氢 HzS</span>
                                        <span style="font-size:0.08rem;color:#6bc9ff;text-indent: 0.10rem;">ppm</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="right_one_item" v-if="latestData.length != 0">
                        <div class="right_one_item_left">
                            <div class="right_one_item_icon">
                                <!-- <img src="../../assets/images/ags/index/temperature.png" alt="" /> -->
                                <img src="../../assets/images/ags/index/pm.png" />
                            </div>
                            <div class="right_one_item_point">
                                <img src="../../assets/images/ags/index/point_one.png" />
                            </div>
                        </div>
                        <div class="right_one_item_right">
                            <div class="right_one_item_one" style="width: 1.1rem;"    >
                                <div class="right_one_item_line" style="border-top: 2px solid #FFC0C0;"></div>
                                <div class="right_one_item_count">
                                    <div class="right_one_item_value" style="font-size:0.19rem;color:#FFC0C0;">
                                        {{ latestData.ch4 }}
                                    </div>
                                    <div class="right_one_item_unit">
                                        <span style="font-size:0.12rem;color: #bad4f4 ;">甲烷 CH4</span>
                                        <span style="font-size:0.08rem;color: #6bc9ff;text-indent: 0.10rem;">ppm</span>
                                    </div>
                                </div>
                            </div>
                            <div class="right_one_item_one" style="width: 1.1rem;"    >
                                <div class="right_one_item_line" style="border-top: 2px solid #FFC0C0;"></div>
                                <div class="right_one_item_count">
                                    <div class="right_one_item_value" style="font-size:0.19rem;color:#FFC0C0;">
                                        {{ latestData.o2 }}
                                    </div>
                                    <div class="right_one_item_unit">
                                        <span style="font-size:0.12rem;color: #bad4f4 ;">氧气 O₂</span>
                                        <span style="font-size:0.08rem;color: #6bc9ff;text-indent: 0.10rem;">%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="right_rf_time">
                        采集时间：{{ latestData.time || '-'}}
                    </div>
                </div>
            </div>
            <!-- <div class="item right_two">
                <div class="right_two_top">
                    <div class="right_two_top_icon">
                        <img src="../../assets/images/ags/index/people.png" />
                    </div>
                    <div class="right_two_top_title">人行记录</div>
                </div>
                <div class="right_two_bottom">
                    <div class="right_two_bottom_left">
                        <div class="right_two_bottom_item">
                            <div class="right_two_bottom_icon">
                                <img src="../../assets/images/ags/index/in.png" />
                                <div class="count">
                                    <span :class="empRecordObj.inNum > 99 ? 'scorllText' : ''">{{ empRecordObj.inNum || 0 }}</span>
                                </div>
                            </div>
                            <div class="right_two_bottom_unit">进场人数/人</div>
                        </div>
                        <div class="right_two_bottom_item" style="margin-top:10px">
                            <div class="right_two_bottom_icon">
                                <img src="../../assets/images/ags/index/out.png" />
                                <div class="count">
                                    <span :class="empRecordObj.outNum > 99 ? 'scorllText' : ''">{{ empRecordObj.outNum || 0 }}</span>
                                </div>
                            </div>
                            <div class="right_two_bottom_unit">出场人数/人</div>
                        </div>
                    </div>
                    <div class="right_two_bottom_right">
                        <Carousel autoplay :value="0" loop dots="none">
                            <CarouselItem v-for="item in empRecordObj.records" :key="item.empId">
                                <div class="right_two_bottom_top">
                                    <div class="name">{{ item.empName }}</div>
                                    <div class="job">{{ item.workTypeName }}</div>
                                </div>
                                <div class="right_two_bottom_bottom">
                                    <div class="icon">
                                        <img :src="item.imgUrl || empDefault" />
                                    </div>
                                    <div class="introduction">
                                        <div class="introduction_item" v-if="item.inTime">
                                            <div class="top">
                                                <div class="icon"></div>
                                                <div class="title">进</div>
                                            </div>
                                            <div class="bottom">
                                                <span>{{ item.inTime }}</span>
                                            </div>
                                        </div>
                                        <div class="introduction_item" v-if="item.outTime">
                                            <div class="top">
                                                <div class="icon"></div>
                                                <div class="title">出</div>
                                            </div>
                                            <div class="bottom">
                                                <span>{{ item.outTime }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </CarouselItem>
                        </Carousel>
                    </div>
                </div>
            </div> -->
            <!-- <div class="item right_three">
                <div class="right_three_top">
                    <div class="right_three_top_icon">
                        <img src="../../assets/images/ags/index/car_record.png" />
                    </div>
                    <div class="right_three_top_title">车行记录</div>
                </div>
                <div class="right_three_bottom">
                    <div class="right_three_bottom_left">
                        <div class="right_three_bottom_item">
                            <div class="right_three_bottom_icon">
                                <img src="../../assets/images/ags/index/in_car.png" />
                                <div class="count">
                                    <span :class="carRecordObj.inNum > 99 ? 'scorllText' : ''">{{ carRecordObj.inNum || 0 }}</span>
                                </div>
                            </div>
                            <div class="right_three_bottom_unit">进场车辆/辆</div>
                        </div>
                        <div class="right_three_bottom_item" style="margin-top:10px">
                            <div class="right_three_bottom_icon">
                                <img src="../../assets/images/ags/index/out_car.png"  />
                                <div class="count">
                                    <span :class="carRecordObj.outNum > 99 ? 'scorllText' : ''">{{ carRecordObj.outNum || 0 }}</span>
                                </div>
                            </div>
                            <div class="right_three_bottom_unit">出场车辆/辆</div>
                        </div>
                    </div>
                    <div class="right_three_bottom_right">
                        <Carousel autoplay :value="0" loop dots="none">
                            <CarouselItem v-for="(item, index) in carRecordObj.records" :key="index">
                                <div class="right_three_bottom_top">
                                    <div class="name">{{ item.licensePlate }}</div>
                                    <div class="job">{{ item.name }}</div>
                                </div>
                                <div class="right_three_bottom_bottom">
                                    <div class="icon">
                                        <img :src="item.imgUrl || carDefault" />
                                    </div>
                                    <div class="introduction">
                                        <div class="introduction_item" v-if="item.inTime">
                                            <div class="top">
                                                <div class="icon"></div>
                                                <div class="title">进</div>
                                            </div>
                                            <div class="bottom">
                                                <span>{{ item.inTime }}</span>
                                            </div>
                                        </div>
                                        <div class="introduction_item" v-if="item.outTime">
                                            <div class="top">
                                                <div class="icon"></div>
                                                <div class="title">出</div>
                                            </div>
                                            <div class="bottom">
                                                <span>{{ item.outTime }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </CarouselItem>
                        </Carousel>
                    </div>
                </div>
            </div> -->
        </div>
        <!-- <div class="mapStyle" v-show="$store.state.boardMdTabActive === 1">
            <div id="map">
                <div class="map-mask"></div>
            </div>
        </div> -->
        <div class="fixed" v-show="devFlag">
            <div class="modal">
                <div class="title">
                    <span>{{ devName }}</span>
                    <span class="close" @click="close(0)">
                        <i class="el-icon-close"></i>
                    </span>
                </div>
                <Tabs v-model="tabType" @on-click="getTab" v-if="objType == 7 || objType == 8 || objType == 10 || objType == 32">
                    <TabPane :label="item.name" v-for="(item, index) in tabList" :name="String(item.id)" :key="index"></TabPane>
                </Tabs>

                <!-- 龙门吊 -->
                <ul v-if="objType == 6 || objType == 7 || objType == 8 || objType == 9 || objType == 10">
                    <li v-for="item in params_data" :key="item.key">
                        <span>{{ item.name }}</span>
                        <span>
                            <em v-if="item.params_type === 1">{{item.value}}</em>
                            <em v-if="item.params_type === 2 && item.value === 0">{{ item.value_text }}</em>
                            <em v-if="item.params_type === 2 && item.value === 1" style="color:red;">{{ item.value_text }}</em>
                            <em v-if="item.params_type === 3 && item.value === 1" style="color:red;">{{ item.value_text }}</em>
                            <em v-if="item.params_type === 3 && item.value === 0">{{ item.value_text }}</em>
                            {{ item.unit }}
                        </span>
                    </li>
                </ul>
                <!-- 环境监测仪 -->
                <ul v-if="objType == 5">
                    <li>
                        <span>PM2.5</span>
                        <span><em>{{ pm25 }}</em>μg/m³</span>
                    </li>
                    <li>
                        <span>PM10</span>
                        <span><em>{{ pm10 }}</em>μg/m³</span>
                    </li>
                    <li>
                        <span>噪音</span>
                        <span><em>{{ noise }}</em>db</span>
                    </li>
                    <li>
                        <span>温度</span>
                        <span><em>{{ envTemp }}</em>℃</span>
                    </li>
                    <li>
                        <span>湿度</span>
                        <span><em>{{ envRh }}</em>%</span>
                    </li>
                    <li>
                        <span>风向/风力</span>
                        <span><em>{{ windDirection }}/{{ windForce }}</em>级</span>
                    </li>
                    <li>
                        <span>风速</span>
                        <span><em>{{ windSpeed }}</em>m/s</span>
                    </li>
                    <li>
                        <span>TSP</span>
                        <span><em>{{ tsp }}</em>μg/m³</span>
                    </li>
                    <li>
                        <span>大气压</span>
                        <span><em>{{ atmos }}</em>kPa</span>
                    </li>
                </ul>
                <!-- 水质检测  -->
                <ul v-if="objType == 4">
                    <li>
                        <span>悬浮物</span>
                        <span><em>{{ ss }}</em></span>
                    </li>
                </ul>
                <!-- 毒害气体检测  -->
                <ul v-if="objType == 12">
                    <li>
                        <span>一氧化碳 CO</span>
                        <span><em>{{ co }}</em>ppm</span>
                    </li>
                    <li>
                        <span>一氧化碳 CO2</span>
                        <span><em>{{ co2 }}</em>ppm</span>
                    </li>
                    <li>
                        <span>硫化氢 H2S</span>
                        <span><em>{{ h2s }}</em>ppm</span>
                    </li>
                    <li>
                        <span>甲烷 CH4</span>
                        <span><em>{{ ch4 }}</em>ppm</span>
                    </li>
                    <li>
                        <span>氧气 O2</span>
                        <span><em>{{ o2 }}</em>%</span>
                    </li>
                </ul>
                <!-- 电箱监测  -->
                <ul v-if="objType == 32 || objType == 31 || objType == 30">
                    <li v-for="(item, index) in params_data" :key="index">
                        <span>{{ item.name }}</span>
                        <span><em>{{ item.value }}</em>{{ item.unit }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
    getBoardPrjDateLatest,
    getEmpRecordDetail,
    getEnvRecordDetails,
    getFimResultDetail,
    getFseRecordDetails,
    getFvsList,
    getFvsToken,
    getProjectOverview,
    getStreamUrl
} from "@/api/api";
import { getBoardSafetyCheckTypeStatistics } from "@/api/md-board";
import rollNum from "./components/rollNum";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
    getAgsEmpRecordAnalysis,
    getAgsCarRecordAnalysis,
    getBoardQualityCheckTypeStatistics,
    getBoardQualityCheckUnfinished,
    getBoardSafetyCheckUnfinished,
    getBoardWarnList
} from "@/api/md-board";
import { initColors } from "@/mixins/colorObj";
import Hls from "hls.js";
import EZUIKit from "ezuikit-js";
import { getenvlatest, getenvList } from "@/api/md_board";
import { wind_Direction, wind_Force } from "@/sever/wind";
import { getBimModelList, getBimModelToken } from "@/api/bim";
import { senceBoard } from "@/mixins/sence-board";
import { getMachRecordDetail_V1 } from "@/api/mach";
import { FMT_DATE_TIME, format, getMonthBeginStr } from "@/sever/dateutil";

import { getDustList, getDustDateList, getDustDatelog,getEvnLogPages ,getBoardEvnLog,getEnvGroupList } from "@/api/api.js";

import {formatTen , formatDate,initYMD} from '@/sever/utils.js'
import {
    getFimResultList,
    getEmpData
} from "@/api/api.js";

import { getMachInfoData_V1 } from "@/api/mach.js"

export default {
    name: "index",
    mixins: [initColors, senceBoard],
    components: {
        rollNum,
        vueSeamlessScroll,
        Treeselect
    },
    data() {
        return {
            //报警推送节流阀
            warnFlag: false,
            //报警详情
            warnDetail: {},
            //报警列表
            warnList: [],
            loading: true,
            //人员默认图
            empDefault: require("../../assets/images/ags/emp/emp-default.png"),
            carDefault: require("../../assets/images/ags/emp/car-default.png"),
            //设备总数
            deviceCount: "675",
            classOption: {
                step: 0.5
            },
            //项目信息
            projectInfoObj: {},
            //时间
            dateArr: [new Date(new Date().valueOf() - 2592000000), new Date()],
            //人行记录
            empRecordObj: {},
            //车辆记录
            carRecordObj: {},
            //在场设备总数
            deviceNum: 0,
            //在场人员总数
            empNum: 0,
            //项目倒计时
            projectNum: 0,
            //视频设备列表
            videoDeviceList: [],
            //视频设备Id
            videoDeviceId: "",
            //列表显示
            videoDeviceFlag: true,
            //hls对象
            hlsObj: null,
            //排名数据列表
            qualityRankList: [],
            //环境设备列表
            envDeviceList: [
                {
                    value: 0,
                    name: '气象',
                },
                {
                    value: 1,
                    name: '边坡',
                }
            ],
            //环境设备名字
            envDeviceName: "",
            //环境设备Id
            envDeviceId: "",
            //环境数据
            envDataList: [
                {
                    name: "PM2.5",
                    num: 0,
                    code: "pm25",
                    unit: "ug/m3"
                },
                {
                    name: "PM10",
                    num: 0,
                    code: "pm10",
                    unit: "ug/m3"
                },
                {
                    name: "TSP",
                    num: 0,
                    code: "tsp",
                    unit: "ug/m3"
                },
                {
                    name: "噪音",
                    num: 0,
                    code: "noise",
                    unit: "db"
                },
                {
                    name: "温度",
                    num: 0,
                    code: "envTemp",
                    unit: "℃"
                },
                {
                    name: "风速",
                    num: 0,
                    code: "windSpeed",
                    unit: "m/s"
                },
                {
                    name: "湿度",
                    num: 0,
                    code: "envRh",
                    unit: "%"
                },
                {
                    name: "风向/风力",
                    num: 0,
                    code: "windDirection",
                    unit: ""
                }
            ],
            qualityTabList: [
                {
                    type: 0,
                    name: "质量",
                    icon: require("../../assets/images/ags/env/tab.png"),
                    icon_hover: require("../../assets/images/ags/env/tab_hover.png")
                },
                {
                    type: 1,
                    name: "安全",
                    icon: require("../../assets/images/ags/env/tab.png"),
                    icon_hover: require("../../assets/images/ags/env/tab_hover.png")
                }
            ],
            urgencyTabList: [
                {
                    type: 0,
                    name: "质量整改",
                    icon: require("../../assets/images/ags/env/tab.png"),
                    icon_hover: require("../../assets/images/ags/env/tab_hover.png")
                },
                {
                    type: 1,
                    name: "安全整改",
                    icon: require("../../assets/images/ags/env/tab.png"),
                    icon_hover: require("../../assets/images/ags/env/tab_hover.png")
                }
            ],
            qualityOrSafety: 0,
            urgencyTab: 0,
            safetyRank: [],
            // EZUIKit对象
            EZUIKitObj: null,
            ezvizToken: "",

            //模型数据列表
            modelList: [],
            // 模型id
            modelId: "",
            //模型token
            viewToken: "",
            //列表显示
            modelFlag: true,
            //状态节流
            statusFlag: false,
            //默认图片
            defaultImg: require("../../assets/images/ags/index/default-img.png"),
            // 2d 类型文件列表
            type2dLst: ["dwf", "dwg"],
            // 3d 类型文件列表
            type3dLst: ["dgn", "rvt"],

            // 地图对象
            mapObj: {},
            //项目名称
            projectName: "",

            // 现场模拟播放视频对象
            senceEZUIKitObj: null,
            senceHlsjs: null,
            pmList: [],
            temList: [],
            windList: [],
            imgList: [],
            unfinishedQuality: {},
            unfinishedSafety: {},
            problemStatus: 0,
            urgentStatus: 0,
            problemSafetyStatus: 0,
            urgentSafetyStatus: 0,
            titleName: "本月质量隐患排名",
            urgentName: "质量",
            rectifiedActive: 0,
            scaleFont: 1,
            clientWidth:'',

            projectData: '',
            projectDetailData: [],
            pmDataList: [],
            temDataList: [],
            envDeviceVal: 0,

            DustDataList: [], // 获取环境设备列表
            DustDeviceVal: null,
            latestData: '',

            FimResultList: [], // 视频报警列表
            empTotal: 0, //总人数
            machTypeCount: 0, // 设备总数
        };
    },
    computed: {
        defaultOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
        projectOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 4, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        }
    },
    methods: {
        onjump(to) {
            console.log(to);
            // 方式1：使用路由resolve获取完整URL，再用window.open打开新页面
            const routeData = this.$router.resolve({
                path: to, // 目标路由路径
                query: {} // 路由参数（可选）
            });
            window.open(routeData.href, '_blank'); // '_blank' 表示新窗口打开
        },
        //质量超期未销问题分析
        getBoardQualityCheckUnfinishedFn() {
            let params = {
                deptId: this.deptId,
                startTime: getMonthBeginStr(new Date(), FMT_DATE_TIME),
                endTime: format(this.dateArr[1], FMT_DATE_TIME)
            };
            getBoardQualityCheckUnfinished(params).then(res => {
                if (res.code == 200) {
                    this.unfinishedQuality = res.data || {};
                    let sortUrgentData = [];
                    let sortProblemData = [];
                    let outerList = [];
                    if (this.unfinishedQuality.exceed != 0) {
                        let sortTwoData = {};
                        sortTwoData["value"] = this.unfinishedQuality.exceed;
                        sortTwoData["name"] = "超期";
                        sortTwoData["itemStyle"] = {
                            normal: { color: "#484CEA" }
                        };
                        sortUrgentData.push(sortTwoData);
                    }
                    if (this.unfinishedQuality.generalIssues != 0) {
                        let sortOneData = {};
                        sortOneData["value"] = this.unfinishedQuality.generalIssues;
                        sortOneData["name"] = "一般";
                        sortOneData["itemStyle"] = {
                            normal: { color: "#018FFC" }
                        };
                        sortUrgentData.push(sortOneData);
                    }
                    if (this.unfinishedQuality.urgencyIssues != 0) {
                        let sortThreeData = {};
                        sortThreeData["value"] = this.unfinishedQuality.urgencyIssues;
                        sortThreeData["name"] = "紧急";
                        sortThreeData["itemStyle"] = {
                            normal: { color: "#4FD2F3" }
                        };
                        sortUrgentData.push(sortThreeData);
                    }

                    if (this.unfinishedQuality.rectified != 0) {
                        let sortThreeData = {};
                        sortThreeData["value"] = this.unfinishedQuality.rectified;
                        sortThreeData["name"] = "待整改";
                        sortThreeData["itemStyle"] = {
                            normal: { color: "#4FD2F3" }
                        };
                        sortProblemData.push(sortThreeData);
                    }
                    if (this.unfinishedQuality.verified != 0) {
                        let sortOneData = {};
                        sortOneData["value"] = this.unfinishedQuality.verified;
                        sortOneData["name"] = "待核验";
                        sortOneData["itemStyle"] = {
                            normal: { color: "#6E73F9" }
                        };
                        sortProblemData.push(sortOneData);
                    }
                    if (this.unfinishedQuality.reviewed != 0) {
                        let sortTwoData = {};
                        sortTwoData["value"] = this.unfinishedQuality.reviewed;
                        sortTwoData["name"] = "待复查";
                        sortTwoData["itemStyle"] = {
                            normal: { color: "#018FFC" }
                        };
                        sortProblemData.push(sortTwoData);
                    }

                    this.problemStatus = Number(
                        this.unfinishedQuality.rectified + this.unfinishedQuality.reviewed + this.unfinishedQuality.verified
                    );
                    this.urgentStatus = Number(
                        this.unfinishedQuality.generalIssues + this.unfinishedQuality.urgencyIssues + this.unfinishedQuality.exceed
                    );
                    if (sortProblemData.length > 0) {
                        sortProblemData.forEach(item => {
                            if (item["name"] == "待整改") {
                                let sortThreeData = {};
                                sortThreeData["value"] = 6;
                                sortThreeData["name"] = "待整改";
                                sortThreeData["itemStyle"] = {
                                    normal: { color: "#4FD2F3" }
                                };
                                outerList.push(sortThreeData);
                            }
                            if (item["name"] == "待核验") {
                                let sortOneData = {};
                                sortOneData["value"] = 2;
                                sortOneData["name"] = "待核验";
                                sortOneData["itemStyle"] = {
                                    normal: { color: "#6E73F9" }
                                };
                                outerList.push(sortOneData);
                            }
                            if (item["name"] == "待复查") {
                                let sortTwoData = {};
                                sortTwoData["value"] = 4;
                                sortTwoData["name"] = "待复查";
                                sortTwoData["itemStyle"] = {
                                    normal: { color: "#018FFC" }
                                };
                                outerList.push(sortTwoData);
                            }
                        });
                    } else {
                        let noData = {};
                        noData["value"] = 1;
                        noData["name"] = "暂无数据";
                        noData["itemStyle"] = {
                            normal: { color: "#484CEA" }
                        };
                        outerList.push(noData);
                    }
                    if (this.problemStatus != 0) {
                        this.$nextTick(() => {
                            this.rightCharts(sortProblemData, outerList);
                        });
                    }
                    if (this.urgentStatus != 0) {
                        this.$nextTick(() => {
                            this.leftCharts(sortUrgentData);
                        });
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },

        //安全超期未销问题分析
        getBoardSafetyCheckUnfinishedFn() {
            let params = {
                deptId: this.deptId,
                startTime: getMonthBeginStr(new Date(), FMT_DATE_TIME),
                endTime: format(this.dateArr[1], FMT_DATE_TIME)
            };
            getBoardSafetyCheckUnfinished(params).then(res => {
                if (res.code == 200) {
                    this.unfinishedSafety = res.data || {};
                    let sortUrgentData = [];
                    let sortProblemData = [];
                    let outerList = [];
                    if (this.unfinishedSafety.exceed != 0) {
                        let sortTwoData = {};
                        sortTwoData["value"] = this.unfinishedSafety.exceed;
                        sortTwoData["name"] = "超期";
                        sortTwoData["itemStyle"] = {
                            normal: { color: "#484CEA" }
                        };
                        sortUrgentData.push(sortTwoData);
                    }
                    if (this.unfinishedSafety.generalIssues != 0) {
                        let sortOneData = {};
                        sortOneData["value"] = this.unfinishedSafety.generalIssues;
                        sortOneData["name"] = "一般";
                        sortOneData["itemStyle"] = {
                            normal: { color: "#018FFC" }
                        };
                        sortUrgentData.push(sortOneData);
                    }
                    if (this.unfinishedSafety.urgencyIssues != 0) {
                        let sortThreeData = {};
                        sortThreeData["value"] = this.unfinishedSafety.urgencyIssues;
                        sortThreeData["name"] = "紧急";
                        sortThreeData["itemStyle"] = {
                            normal: { color: "#4FD2F3" }
                        };
                        sortUrgentData.push(sortThreeData);
                    }

                    if (this.unfinishedSafety.rectified != 0) {
                        let sortThreeData = {};
                        sortThreeData["value"] = this.unfinishedSafety.rectified;
                        sortThreeData["name"] = "待整改";
                        sortThreeData["itemStyle"] = {
                            normal: { color: "#4FD2F3" }
                        };
                        sortProblemData.push(sortThreeData);
                    }
                    if (this.unfinishedSafety.verified != 0) {
                        let sortOneData = {};
                        sortOneData["value"] = this.unfinishedSafety.verified;
                        sortOneData["name"] = "待核验";
                        sortOneData["itemStyle"] = {
                            normal: { color: "#018FFC" }
                        };
                        sortProblemData.push(sortOneData);
                    }
                    if (this.unfinishedSafety.reviewed != 0) {
                        let sortTwoData = {};
                        sortTwoData["value"] = this.unfinishedSafety.reviewed;
                        sortTwoData["name"] = "待复查";
                        sortTwoData["itemStyle"] = {
                            normal: { color: "#484CEA" }
                        };
                        sortProblemData.push(sortTwoData);
                    }
                    if (sortProblemData.length > 0) {
                        sortProblemData.forEach(item => {
                            if (item["name"] == "待整改") {
                                let sortThreeData = {};
                                sortThreeData["value"] = 6;
                                sortThreeData["name"] = "待整改";
                                sortThreeData["itemStyle"] = {
                                    normal: { color: "#4FD2F3" }
                                };
                                outerList.push(sortThreeData);
                            }
                            if (item["name"] == "待核验") {
                                let sortOneData = {};
                                sortOneData["value"] = 2;
                                sortOneData["name"] = "待核验";
                                sortOneData["itemStyle"] = {
                                    normal: { color: "#6E73F9" }
                                };
                                outerList.push(sortOneData);
                            }
                            if (item["name"] == "待复查") {
                                let sortTwoData = {};
                                sortTwoData["value"] = 4;
                                sortTwoData["name"] = "待复查";
                                sortTwoData["itemStyle"] = {
                                    normal: { color: "#018FFC" }
                                };
                                outerList.push(sortTwoData);
                            }
                        });
                    } else {
                        let noData = {};
                        noData["value"] = 1;
                        noData["name"] = "暂无数据";
                        noData["itemStyle"] = {
                            normal: { color: "#484CEA" }
                        };
                        outerList.push(noData);
                    }
                    this.problemStatus = Number(
                        this.unfinishedSafety.rectified + this.unfinishedSafety.reviewed + this.unfinishedSafety.verified
                    );
                    this.urgentStatus = Number(
                        this.unfinishedSafety.generalIssues + this.unfinishedSafety.urgencyIssues + this.unfinishedSafety.exceed
                    );
                    if (this.problemStatus != 0) {
                        this.$nextTick(() => {
                            this.rightCharts(sortProblemData, outerList);
                        });
                    }
                    if (this.urgentStatus != 0) {
                        this.$nextTick(() => {
                            this.leftCharts(sortUrgentData);
                        });
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //本月安全隐患排名
        getRankListFn() {
            let params = {
                deptId: this.deptId,
                startTime: getMonthBeginStr(new Date(), FMT_DATE_TIME),
                endTime: format(this.dateArr[1], FMT_DATE_TIME)
            };
            getBoardSafetyCheckTypeStatistics(params).then(res => {
                if (res.code == 200) {
                    this.safetyRank = res.data.list || [];
                    this.safetyRank = this.rankFormat(this.safetyRank);
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },

        getActiveItem(item) {
            this.qualityOrSafety = item.type;
            if (item.type == 0) {
                this.titleName = "本月质量隐患排名";
                this.getQualityRankListFn();
            } else {
                this.titleName = "本月安全隐患排名";
                this.getRankListFn();
            }
        },

        getUrgencyItem(item) {
            this.urgencyTab = item.type;
            if (item.type == 0) {
                this.urgentName = "质量";
                this.getBoardQualityCheckUnfinishedFn();
            } else {
                this.urgentName = "安全";
                this.getBoardSafetyCheckUnfinishedFn();
            }
        },

        rankFormat(list) {
            if (list.length > 0) {
                if (list.length > 3) {
                    let sliceList = list.slice(0, 3);
                    let spliceList = list.splice(3);
                    sliceList[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    sliceList[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    sliceList[2]["icon"] = require("../../assets/images/ags/index/left_third.png");
                    spliceList.forEach(item => {
                        item["icon"] = require("../../assets/images/ags/index/left_fourth.png");
                    });
                    let mergeList = [...sliceList, ...spliceList];
                    return mergeList;
                }
                if (list.length == 1) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    return list;
                }
                if (list.length == 2) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    list[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    return list;
                }
                if (list.length == 3) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    list[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    list[2]["icon"] = require("../../assets/images/ags/index/left_third.png");
                    return list;
                }
            }
        },
        // 金额格式化——显示千位分隔符
        moneyFormat(money) {
            let str = money.toString();

            // 没有小数点时，在末尾补上一个小数点
            if (str.indexOf(".") === -1) {
                str += ".";
            }
            return str.replace(/(\d)(?=(\d{3})+\.)/g, "$1,").replace(/\.$/, "");
        },

        leftCharts(data) {
            let leftChart = document.getElementById("left_echart_chart");
            let leftMyChart = this.$echarts.init(leftChart);
            let option;
            option = {
                series: [
                    {
                        name: "Nightingale Chart",
                        type: "pie",
                        radius: ["20%", "60%"],
                        center: ["52%", "58.5%"],
                        avoidLabelOverlap: true,
                        roseType: "area",
                        itemStyle: {
                            borderRadius: 1
                        },
                        data: data,
                        labelLine: {
                            normal: {
                                // 统⼀设置指⽰线长度
                                length: 2,
                                length2: 3,
                                maxSurfaceAngle: 90
                            }
                        },
                        label: {
                            formatter: "{name|{b}} {time|{c}} {name|项}",
                            rich: {
                                time: {
                                    fontSize: "0.2rem",
                                    color: "#fff"
                                },
                                name: {
                                    fontSize: "0.1rem",
                                    color: "#D8F0FE"
                                }
                            }
                        }
                    }
                ]
            };
            option && leftMyChart.setOption(option);
            window.addEventListener("resize", function() {
                leftMyChart.resize();
            });
        },
        rightCharts(data, data2) {
            let rightChart = document.getElementById("right_echart_chart");
            let rightMyChart = this.$echarts.init(rightChart);
            let option;
            option = {
                series: [
                    {
                        name: "Expected",
                        type: "funnel",
                        left: 1,
                        top: 23,
                        bottom: 0,
                        width: "55%",
                        height: "65%",
                        sort: "ascending",
                        itemStyle: {
                            borderWidth: 0,
                            opacity: 0.6
                        },
                        data: data2,
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    },
                    {
                        name: "Funnel",
                        type: "funnel",
                        left: 1,
                        top: 23,
                        bottom: 0,
                        width: "55%",
                        height: "65%",
                        // min: 1,
                        // max: 60,
                        minSize: "0%",
                        maxSize: "100%",
                        sort: "ascending",
                        gap: 2,
                        label: {
                            show: true,
                            position: "outside",
                            formatter: "{name|{b}} {time|{c}} {name|项}",
                            rich: {
                                time: {
                                    fontSize: "0.2rem",
                                    color: "#fff"
                                },
                                name: {
                                    fontSize: "0.1rem",
                                    color: "#D8F0FE"
                                }
                            }
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: "solid"
                            }
                        },
                        itemStyle: {
                            borderColor: "#fff",
                            borderWidth: 0
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: data
                    }
                ]
            };
            option && rightMyChart.setOption(option);
            window.addEventListener("resize", function() {
                rightMyChart.resize();
            });
        },
        // 获取报警列表
        getBoardWarnListFn() {
            let params = {
                deptId: this.deptId
            };
            getBoardWarnList(params).then(res => {
                if (res.code == 200) {
                    this.warnList = res.data.list;
                    this.$refs["warpScroll"].reset();
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //获取报警推送
        handleWarning(e) {
            let {
                warnid,
                moduletype,
                modulename,
                ruletypename
            } = e.target.dataset;
            this.warnFlag = true;
            let warningDetailFn = null;
            let params = {};
            /**
             * 1-设备 2-人员  4-环境 5-智能监控  6-特种设备
             * */
            if (moduletype == 1) {
                // id
                params.id = warnid;
                warningDetailFn = getMachRecordDetail_V1;
            } else if (moduletype == 2) {
                // warnId
                params.warnId = warnid;
                warningDetailFn = getEmpRecordDetail;
            } else if (moduletype == 4) {
                // id
                params.id = warnid;
                warningDetailFn = getEnvRecordDetails;
            } else if (moduletype == 5) {
                // resultId
                params.resultId = warnid;
                warningDetailFn = getFimResultDetail;
            } else if (moduletype == 6) {
                // id
                params.id = warnid;
                warningDetailFn = getFseRecordDetails;
            }
            warningDetailFn(params).then(res => {
                if (res.code == 200) {
                    this.warnDetail = res.data || {};
                    this.warnDetail.moduleName = modulename;
                    this.warnDetail.moduleType = moduletype;
                    this.warnDetail.ruleTypeName = ruletypename;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },

        //BIM模型列表(不分页)
        getBimModelListFn() {
            let params = {
                deptId: this.deptId
            };
            getBimModelList(params).then(res => {
                if (res.code == 200) {
                    this.modelList = res.data.list || [];
                    if (this.modelList.length > 0) {
                        this.getBimModelTokenFn(this.modelList[0]);
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        // 获取ViewToken
        getBimModelTokenFn(item) {
            this.statusFlag = item.status === 5;
            if (!this.statusFlag) return false;
            this.modelId = item.modelId;
            this.$refs.bimDom.innerHTML = "";
            // 转换成功才可以请求token
            let params = {
                modelId: item.modelId
            };
            getBimModelToken(params).then(res => {
                if (res.code == 200) {
                    this.viewToken = res.data;
                    let suffix = item.suffix.startsWith(".") ? item.suffix.substring(1, item.suffix.length) : item.suffix;
                    this.type2dLst.includes(suffix) ? this.initBim2DFn() : "";
                    this.type3dLst.includes(suffix) ? this.initBimModelFn() : "";
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        // 初始化 bim 模型
        initBimModelFn() {
            let viewToken = this.viewToken;
            // 声明Viewer及App
            let viewer3D;
            let app;
            let viewAdded = false;
            // 配置JSSDK加载项
            let loaderConfig = new BimfaceSDKLoaderConfig();
            loaderConfig.viewToken = viewToken;
            BimfaceSDKLoader.load(
                loaderConfig,
                successCallback,
                failureCallback
            );
            // 加载成功回调函数
            let worldPosition = new Array();

            function successCallback(viewMetaData) {
                let dom4Show = document.getElementById("bimDom");
                // 设置WebApplication3D的配置项
                let webAppConfig = new Glodon.Bimface.Application.WebApplicationRfaConfig();
                webAppConfig.domElement = dom4Show;
                webAppConfig.EnableFamilyList = false;
                // 设置模型爆炸配置项
                webAppConfig.enableExplosion = true;
                // 创建WebApplication3D，用以显示模型
                app = new Glodon.Bimface.Application.WebApplicationRfa(
                    webAppConfig
                );
                app.addView(viewToken);
                viewer3D = app.getViewer();

                // 监听添加view完成的事件
                viewer3D.addEventListener(
                    Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,
                    function() {
                        setCameraStatus();
                        //自适应屏幕大小
                        window.onresize = function() {
                            viewer3D.resize(
                                document.documentElement.clientWidth,
                                document.documentElement.clientHeight - 40
                            );
                        };
                        viewAdded = true;
                        // 渲染3D模型
                        viewer3D.render();
                    }
                );
            }

            // 加载失败回调函数
            function failureCallback(error) {
                console.log(error);
            }

            function setCameraStatus() {
                viewer3D.setCameraStatus();
            }

            // ************************** 设置自定义HOME视图 **************************
            let homeview;

            function customView() {
                if (!viewAdded) {
                    return;
                } else {
                    homeview = viewer3D.getCameraStatus();
                    viewer3D.recordCustomHomeview(homeview);
                    window.alert(JSON.stringify(homeview));
                    viewer3D.render();
                }
            }
        },
        initBim2DFn() {
            let viewToken = this.viewToken;
            // 声明Viewer及App
            let viewer2D;
            let app;
            let viewLoaded = false;
            let drawingFrame = null;
            let drawingCount = null;
            let drawingIndex = null;
            let loaderConfig = new BimfaceSDKLoaderConfig();
            loaderConfig.viewToken = viewToken;
            BimfaceSDKLoader.load(
                loaderConfig,
                successCallback,
                failureCallback
            );

            // 加载成功回调函数
            function successCallback(viewMetaData) {
                let dom4Show = document.getElementById("bimDom");
                // 设置WebApplicationDrawing的配置项
                let webAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig();
                webAppConfig.domElement = dom4Show;
                // 创建WebApplicationDrawing，用以显示模型
                app = new Glodon.Bimface.Application.WebApplicationDrawing(
                    webAppConfig
                );
                app.load(viewToken);
                viewer2D = app.getViewer();
                // 添加视口变化的监听事件
                viewer2D.addEventListener(
                    Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded,
                    function(data) {
                        window.onresize = function() {
                            viewer2D.resize(
                                document.documentElement.clientWidth,
                                document.documentElement.clientHeight - 40
                            );
                        };
                        viewLoaded = true;
                        // 获取拆图结果
                        if (!drawingCount) {
                            viewer2D.getDrawingFrame(function(data) {
                                drawingFrame = data.data[0].frames;
                                drawingCount = drawingFrame.length;
                            });
                        }
                    }
                );
            }

            // 加载失败回调函数
            function failureCallback(error) {
                console.log(error);
            }

            let isFullDrawingLoaded = true;

            function loadFull() {
                if (!viewLoaded || isFullDrawingLoaded) {
                    return;
                }
                viewer2D.destroy();
                viewer2D.load(viewToken);
                isFullDrawingLoaded = true;
            }

            function loadSingle() {
                if (!viewLoaded) {
                    return;
                }
                viewer2D.destroy();
                let index = random(drawingCount);
                drawingIndex = index + 1;
                viewer2D.loadFrame(viewToken, drawingFrame[index].id);
                // console.log("Load drawing index: " + drawingIndex + ".");
                // console.log(
                //     "Drawing name is " + drawingFrame[index].name + "."
                // );
                // console.log(
                //     "Drawing number is " + drawingFrame[index].number + "."
                // );
                isFullDrawingLoaded = false;
            }

            function random(number) {
                return Math.floor(Math.random() * number);
            }
        },
        //获取环境设备
        getEnvDeviceTypeFn(deviceId) {
            this.envDeviceId = deviceId;
            for (let i = 0; i < this.envDeviceList.length; i++) {
                if (this.envDeviceList[i].id === deviceId) {
                    this.envDeviceName = this.envDeviceList[i].name;
                    break;
                }
            }
            this.getEnvLatestFn();
        },
        onEnvDeviceTypeFn(val) {
            this.envDeviceVal = val;
            console.log(this.envDeviceVal)
            if(this.envDeviceVal == 0) {
                this.pmList = this.temDataList.slice(0, 3);
                this.temList = this.temDataList.slice(3, 6);
                this.windList = this.temDataList.slice(6, 9);
            } else {
                this.pmList = this.pmDataList.slice(0, 3);
                this.temList = this.pmDataList.slice(3, 6);
                this.windList = this.pmDataList.slice(6, 9);
            }
        },
        //获取环境设备列表
        getEnvList() {
            return
            let params = {
                deptId: this.deptId
            };
            getenvList(params).then(res => {
                if (res.code == 200) {
                    let data = res.data.list || [];
                    let arr = [];
                    data.forEach(e => {
                        if (e.deviceType == 5) {
                            let obj = {};
                            obj.id = e.id;
                            obj.name = e.name;
                            arr.push(obj);
                        }
                    });
                    this.envDeviceList = arr;
                    if (this.envDeviceList.length > 0) {
                        this.envDeviceId = this.envDeviceList[0].id;
                        this.envDeviceName = this.envDeviceList[0].name;
                        this.getEnvLatestFn();
                    } else {
                        this.envDeviceId = "";
                        this.envDeviceName = "";
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //环境设备最新数据
        getEnvLatestFn() {
            let params = {
                dustId: this.envDeviceId
            };
            getenvlatest(params).then(res => {
                if (res.code == 200) {
                    let data = res.data;
                    this.envDataList = [
                        {
                            name: "PM2.5",
                            num: 0,
                            code: "pm25",
                            unit: "ug/m3"
                        },
                        {
                            name: "PM10",
                            num: 0,
                            code: "pm10",
                            unit: "ug/m3"
                        },
                        {
                            name: "TSP",
                            num: 0,
                            code: "tsp",
                            unit: "ug/m3"
                        },
                        {
                            name: "噪音",
                            num: 0,
                            code: "noise",
                            unit: "db"
                        },
                        {
                            name: "温度",
                            num: 0,
                            code: "envTemp",
                            unit: "℃"
                        },
                        {
                            name: "风速",
                            num: 0,
                            code: "windSpeed",
                            unit: "m/s"
                        },
                        {
                            name: "湿度",
                            num: 0,
                            code: "envRh",
                            unit: "%"
                        },
                        {
                            name: "风向/风力",
                            num: 0,
                            code: "windDirection",
                            unit: ""
                        },
                        {
                            name: "大气压",
                            num: 0,
                            code: "atmos",
                            unit: "kPa"
                        }
                    ];
                    for (const key in data) {
                        for (const envKey in this.envDataList) {
                            if (this.envDataList[envKey].code === key) {
                                this.envDataList[envKey]["num"] = data[key];
                            }
                        }
                    }
                    let windDirection =
                        wind_Direction(data.windDirection)[0] || "—";

                    let windForce = wind_Force(data.windSpeed);
                    this.envDataList[
                        this.envDataList.length - 2
                    ].num = `${windDirection}/${windForce}级`;
                    this.pmList = this.envDataList.slice(0, 3);
                    this.temList = this.envDataList.slice(3, 6);
                    this.windList = this.envDataList.splice(6);
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //本月质量隐患排名
        getQualityRankListFn() {
            let params = {
                deptId: this.deptId,
                startTime: getMonthBeginStr(new Date(), FMT_DATE_TIME),
                endTime: format(this.dateArr[1], FMT_DATE_TIME)
            };
            getBoardQualityCheckTypeStatistics(params).then(res => {
                if (res.code == 200) {
                    this.qualityRankList = res.data.list || [];
                    this.qualityRankList = this.rankFormat(
                        this.qualityRankList
                    );
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //获取萤石云直播器token
        getToken() {
            let params = {
                deptId: this.deptId,
                platform: 0
            };
            getFvsToken(params).then(res => {
                if (res.code == 200) {
                    this.ezvizToken = res.data.token;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //播放实时监控-EZUIKit
        playEZUIKitVideo(url) {
            let clientWidth = this.$refs["videoElement"].clientWidth;
            let clientHeight = this.$refs["videoElement"].clientHeight;
            this.EZUIKitObj = new EZUIKit.EZUIKitPlayer({
                id: "videoElement",
                url,
                autoplay: true,
                accessToken: this.ezvizToken,
                decoderPath: "../../../static",
                width: clientWidth,
                height: clientHeight,
                audio: 0
            });
            this.EZUIKitObj.play();
        },
        // 播放实时监控-hls
        playVideo(url) {
            let _this = this;
            let video = this.$refs.videoElement2; //定义挂载点
            if (Hls.isSupported()) {
                this.hlsObj = new Hls();
                this.hlsObj.loadSource(url);
                this.hlsObj.attachMedia(video);
                this.hlsObj.on(Hls.Events.MANIFEST_PARSED, () => {
                    video.play();
                });
                this.hlsObj.on(Hls.Events.ERROR, function(event, data) {
                    switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            _this.hlsObj.startLoad();
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            // 多媒体错误
                            _this.hlsObj.recoverMediaError();
                            break;
                        default:
                            _this.hlsObj.destroy();
                            _this.$nextTick(() => {
                                // 非网络或多媒体错误，重新获取url
                                _this.playVideo(url);
                            });
                            break;
                    }
                });
            }
        },
        //获取视频设备播放地址
        getDeviceInfoFn(item) {
            if (this.hlsObj) {
                this.$refs.videoElement2.pause();
                this.hlsObj.destroy();
                this.hlsObj = null;
            }
            if (this.EZUIKitObj) {
                this.EZUIKitObj.stop();
                this.EZUIKitObj = null;
                this.$refs["videoElement"].innerHTML = "";
            }
            this.videoDeviceId = item.id;
            let params = {
                id: item.id
            };
            getStreamUrl(params).then(res => {
                if (res.code == 200) {
                    let url;
                    this.playModeFlag = false;
                    if (item.playMode === 2) {
                        this.playModeFlag = true;
                        url = res.data.ezopen;
                        this.$nextTick(() => {
                            this.playEZUIKitVideo(url);
                        });
                    } else {
                        this.playModeFlag = false;
                        if (res.data.playUrl) {
                            url = res.data.playUrl;
                            this.$refs.videoElement2.setAttribute("src", url);
                        } else {
                            url = res.data.hls;
                            this.$nextTick(() => {
                                this.playVideo(url);
                            });
                        }
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //获取视频设备列表
        getFvsListFn() {
            let params = {
                keyword: "",
                deptId: this.deptId,
                bizType: ""
            };
            getFvsList(params).then(res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    let arr = list.filter(v => v.deviceStatus === 1) || [];
                    if (arr.length > 0) {
                        this.getDeviceInfoFn(arr[0]);
                    }
                    this.videoDeviceList = list || [];
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },

        // 人行记录
        getBoardEmpRecordAnalysisFn() {
            let params = {
                deptId: this.deptId,
                startDate: format(),
                endDate: format()
            };
            getAgsEmpRecordAnalysis(params).then(res => {
                if (res.code == 200) {
                    this.empRecordObj = res.data;
                    this.empRecordObj.records.forEach(item => {
                        item["imgUrl"] = item.inImgUrl ? item.inImgUrl : item.outImgUrl;
                        item["inTime"] = item.inTime ? item.inTime.substring(0, 16) : "";
                        item["outTime"] = item.outTime ? item.outTime.substring(0, 16) : "";
                    });
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //车辆记录
        getBoardCarRecordAnalysisFn() {
            let params = {
                deptId: this.deptId,
                startDate: format(),
                endDate: format()
            };
            getAgsCarRecordAnalysis(params).then(res => {
                if (res.code == 200) {
                    this.carRecordObj = res.data;
                    this.carRecordObj.records.forEach(item => {
                        item["imgUrl"] = item.inImgUrl ? item.inImgUrl : item.outImgUrl;
                        item["inTime"] = item.inTime ? item.inTime.substring(0, 16) : "";
                        item["outTime"] = item.outTime ? item.outTime.substring(0, 16) : "";
                    });
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //获取项目概况数据
        getProjectInfoFn() {
            let params = {
                deptId: this.deptId
            };
            getProjectOverview(params).then(res => {
                console.log('---------获取项目概况数据--------------', res);
                if (res.code == 200) {
                    this.projectInfoObj = res.data;
                    this.imgList = res.data.imgList;
                    if(this.projectInfoObj["money"]) {
                        this.projectInfoObj["money"] = this.moneyFormat(this.projectInfoObj["money"]);
                    }
                    let timeFlag = new Date(this.projectInfoObj.completeDate).getTime() > new Date().getTime();
                    if (this.projectInfoObj.completeDate && timeFlag) {
                        this.projectNum = parseInt(((new Date(res.data.completeDate).getTime() - new Date().getTime()) / 86400000).toFixed(0));
                    } else {
                        this.projectNum = 0;
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        getBoardPrjDateLatestFn() {
            let params = {
                deptId: this.deptId
            };
            getBoardPrjDateLatest(params).then(res => {
                if (res.code == 200) {
                    let obj = res.data;
                    this.deviceNum =
                        obj.machOnlineNum +
                        obj.fseOnlineNum +
                        obj.dustOnlineNum +
                        obj.fvsOnlineNum;
                    this.empNum = obj.empAttendNum;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },

        getData() {
            /* 登录 */
            this.$axios.post("/monitor-huace/API/mas/auth/web/login?deviceType=1",
                {
                    password: "SAk5NZ5C9fGcT0zBGOOzpg==",
                    username: "5nSsFRE7BX7TlTd5xasBrw==",
                    isCheck: true
                }
        	).then(response => {
        		console.log("登录: ", response);
                if(response.code == '200') {
                    localStorage.setItem('monitorHuaceData', response.data);
                    localStorage.setItem('monitorHuaceTokenValue', response.data.tokenValue);
                    this.getProjectInfoList(response.data);
                }
        	}).catch(error => {
        		console.log("error: ", error);
        	});
        },
        getProjectInfoList(data) {
            /* 条件查询项目信息 */
            this.$axios.post("/monitor-huace/API/mas/project/projectInfo/list",
                {
                    // name: data.tokenName, // 项目名称
                    // industryId: "1", // 行业id
                    // region: "140000" // 行政区域
                }
            ).then(response => {
            	console.log("条件查询项目信息: ", response);
                if(response.code == '200') {
                    this.projectData = response.data[0];
                    localStorage.setItem('monitorHuaceprojectData', response.data);
                    this.getProjectIndexDetail();
                }
            }).catch(error => {
            	console.log("error: ", error);
            });
        },
        getProjectIndexDetail() {
            /* 详情/气象边坡 */
            this.$axios.post("/monitor-huace/API/mas/project/index/detail", {
                projectId: this.projectData.id,
                statusList: [6, 5, 4, 3, 1, 2, -1, 8]
            } ).then(res => {
            	console.log(": ", res);
                if(res.code == '200') {
                    this.projectDetailData = res.data[0].measurePointIndexVos;
                    // this.getLogs(0, this.projectDetailData[this.active]);
                    // this.pmList = this.envDataList.slice(0, 3);
                    // this.temList = this.envDataList.slice(3, 6);
                    // this.windList = this.envDataList.splice(6);
                    /*
                        雨量: L3_YL
                        角度: L1_QJ
                        湿度: L3_HCQS
                        气压: L3_QY
                        风向: L3_HCFX
                        气温: L3_QW
                        光辐射: L3_HCGF
                        风速: L3_HCFS
                        加速度: L1_JS
                    */
                    for (var index = 0; index < this.projectDetailData.length; index++) {
                        if(this.projectDetailData[index].dicType == 'L1_QJ') {
                            this.pmDataList.push(this.projectDetailData[index]);
                        } else {
                            this.temDataList.push(this.projectDetailData[index]);
                        }
                    }
                    /*
                        {
                            value: 0,
                            name: '气象',
                        },
                        {
                            value: 1,
                            name: '边坡',
                        }
                    */
                    if(this.envDeviceVal == 0) {
                        this.pmList = this.temDataList.slice(0, 3);
                        this.temList = this.temDataList.slice(3, 6);
                        this.windList = this.temDataList.slice(6, 9);
                    } else {
                        this.pmList = this.pmDataList.slice(0, 3);
                        this.temList = this.pmDataList.slice(3, 6);
                        this.windList = this.pmDataList.slice(6, 9);
                    }
                }
            }).catch(err => {
            	console.log("error: ", err);
            });
        },

        // 获取分组
        getEnvGroupList(){

            getEnvGroupList({
                deptId: this.deptId
            }).then((res) => {
                if (res.code == 200) {
                    // this.groupList = res.data.list;
                    // this.groupNamesId = res.data.list[0].groupId
                    this.getAllList(res.data.list[0].groupId);
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch((error) => {
                console.log(error);
            });
        },
        //获取环境设备列表
        getAllList(groupId) {
            getDustList({
                deptId: this.deptId,
                type: 12,
                groupId: groupId,
            }).then((res) => {
                if (res.code == 200) {
                    console.log('getDustList', res.data.list)
                    this.DustDataList = res.data.list;
                    this.DustDeviceVal = this.DustDataList[0].id;
                    this.getDustDateList()
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch((error) => {
                console.log(error);
            });
        },
        onDustDeviceTypeFn(val) {
            this.DustDeviceVal = val;
            console.log(this.DustDeviceVal)
            this.getDustDateList()
            // if(this.DustDeviceVal == 0) {
            //     this.pmList = this.temDataList.slice(0, 3);
            //     this.temList = this.temDataList.slice(3, 6);
            //     this.windList = this.temDataList.slice(6, 9);
            // } else {
            //     this.pmList = this.pmDataList.slice(0, 3);
            //     this.temList = this.pmDataList.slice(3, 6);
            //     this.windList = this.pmDataList.slice(6, 9);
            // }
        },
        getDustDateList() {
            getDustDateList({
                id: this.DustDeviceVal,
            }).then((res) => {
                if (res.code == 200) {
                    this.latestData = res.data;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch((error) => {
                console.log(error);
            });
        },

        // 视频报警
        getFimResultList() {
            this.totalCount = '';
            getFimResultList({
                deptId: this.deptId,
                handleStatus: 0,
                pageNum: 1,
                pageSize: 10,
                startTime: formatDate(this.dateArr[0]),
                endTime: formatDate(this.dateArr[1])
            }).then(res => {
                if (res.code == 200) {
                    this.FimResultList = res.data.list
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },

        getEmpData() {
            getEmpData({
                deptId: this.deptId
            }).then(res => {
                if (res.code == 200) {
                    this.empTotal = res.data.enterEmp.empTotal;//总人数
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },

        getMachInfoData_V1() {
            getMachInfoData_V1({
                deptId: this.deptId,
            }).then((res) => {
                if (res.code == 200) {
                    // for (let i in res.data.machTypeStat) {
                    //     this.machTypeCount += Number(res.data.machTypeStat[i].num)
                    // }
                    this.machTypeCount = res.data.totalNum;
                } else {
                    this.$Message.warning(res.msg)
                }
            }).catch((error) => {
                console.log(error)
            })
        },
    },
    mounted() {

        let that = this;
        // let clientWidth = document.body.clientWidth
        // this.scaleFont = 1-((1920-clientWidth)/1920)
        // this.scaleFontStyle = {
        //     "-webkit-transform":"scale("+this.scaleFont+")",
        // }
        this.clientWidth = document.documentElement.clientWidth
        this.deptId = this.$store.state.porjectObject.deptId;
        this.lat = this.$store.state.porjectObject.lat == undefined ? 30.592335 : this.$store.state.porjectObject.lat;
        this.lng = this.$store.state.porjectObject.lng == undefined ? 114.29484 : this.$store.state.porjectObject.lng;
        this.projectName = this.$store.state.porjectObject.title;

        this.getEnvGroupList();
        this.getFimResultList();
        this.getEmpData();
        this.getMachInfoData_V1();

        this.getData();
        this.getBoardQualityCheckUnfinishedFn();
        this.getBoardWarnListFn();
        this.getProjectInfoFn();
        this.getEnvList();
        this.getQualityRankListFn();
        this.getBoardEmpRecordAnalysisFn();
        this.getBoardCarRecordAnalysisFn();
        this.getBoardPrjDateLatestFn();
        // if (this.$store.state.boardMdTabActive === 1) {
        //     this.getMap();
        // } else
        if (this.$store.state.boardMdTabActive === 2) {
            // this.getSceneDetailsFn(this.deptId);
            // this.getToken();
        } else if (this.$store.state.boardMdTabActive === 3) {
            this.getToken();
            this.getFvsListFn();
        } else if (this.$store.state.boardMdTabActive === 4) {
            // this.getBimModelListFn();
        }
    },
    beforeDestroy() {
        if (this.hlsObj) {
            this.$refs["videoElement2"].pause();
            this.hlsObj.destroy();
            this.hlsObj = null;
        }
        if (this.EZUIKitObj) {
            this.EZUIKitObj.stop();
            this.EZUIKitObj = null;
            this.$refs["videoElement"].innerHTML = "";
        }
    }
};
</script>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
@font-face {
    font-family: "led regular";
    src: url("../../assets/font/ds-digib-webfont.woff") format("woff");
}
@font-face {
    font-family: "lcd regular";
    src: url("../../assets/font/texasled-webfont.woff") format("woff");
}
/deep/ .Dropdown {
    .text {
        font-size: pxToRem(14);
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #94d8ff;
    }

    .ivu-select-dropdown {
        overflow-x: hidden;
        background: #082034 !important;
        width: 1.5rem !important;
        opacity: 0.9;
        height: 3.5rem;
        // box-shadow: 0px 0px pxToRem(5) 0px rgba(1, 223, 244, 0.2);
        // border-radius: pxToRem(10);

        &::-webkit-scrollbar {
            width: 0px !important;
        }

        color: #fff;
        // /*滚动槽*/
        // &::-webkit-scrollbar-track {
        //     -webkit-box-shadow: inset 0 0 6px rgba(1, 223, 244, 0.2);
        //     border-radius: 10px;
        // }

        // /* 滚动条滑块 */
        // &::-webkit-scrollbar-thumb {
        //     border-radius: 10px;
        //     background: rgba(1, 223, 244, 0.2);
        //     -webkit-box-shadow: inset 0 0 6px rgba(1, 223, 244, 0.2);
        // }

        // &::-webkit-scrollbar-thumb:window-inactive {
        //     background: rgba(255, 0, 0, 0.4);
        // }

        .ivu-dropdown-item {
            font-size: pxToRem(16);
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(188, 240, 254, 0.8);

            &.ivu-dropdown-item-selected {
                background-color: transparent;
                color: #d8f0fe;
            }

            &:hover {
                font-size: pxToRem(12);
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #d8f0fe;
                background-color: transparent;
            }
        }
    }
}
/deep/#subPage {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 3;
    // .mapStyle {
    //     position: absolute;
    //     z-index: -10;
    //     width: 100%;
    //     height: 100%;
    //     #map {
    //         width: 100%;
    //         height: 100%;
    //         .map-mask {
    //             position: absolute;
    //             pointer-events: none;
    //             width: 100%;
    //             height: 100%;
    //             left: 0;
    //             top: 0;
    //             z-index: 1;
    //             background-image: radial-gradient( transparent 35%,rgb(94, 94, 90), rgb(12, 12, 12))
    //         }
    //     }
    // }
    .subPage-left,
    .subPage-right {
        width: pxToRem(440);
        min-width: pxToRem(440);
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        .item {
            width: 100%;
            height: pxToRem(320);
            background-image: url("../../assets/images/ags/index/left_panel.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 120%;
            padding: pxToRem(5) 0;
            box-sizing: border-box;
            margin-bottom: pxToRem(20);
        }
        .left_one {
            display: flex;
            flex-flow: column nowrap;
            .left_one_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                margin-top: pxToRem(10);
                .left_one_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .left_one_top_title {
                    width: pxToRem(168);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_one_center {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                .left_one_center_line {
                    margin: pxToRem(10) 0 0 pxToRem(10);
                    width: pxToRem(10);
                    height: pxToRem(53);
                    border-right: 2px solid #0099ff;
                }
                .left_one_center_left {
                    .left_one_center_money {
                        padding: pxToRem(-10) 0 0 0;
                        span:first-of-type {
                            display: block;
                            font-family: "led regular";
                            font-size: pxToRem(36);
                            color: #00f0ff;
                        }
                        span:last-of-type {
                            font-size: pxToRem(14);
                            margin-top: pxToRem(-10);
                            display: block;
                            color: #00f0ff;
                            white-space: nowrap;
                        }
                    }
                }
                .left_one_center_right {
                    margin: pxToRem(10) 0 0 pxToRem(10);
                    padding-top: pxToRem(5);
                    .left_one_center_date {
                        display: flex;
                        flex-flow: column nowrap;
                        width: pxToRem(130);
                        .commencementDate {
                            display: flex;
                            justify-content: flex-start;
                            .headline{
                                display: inline-block;
                                color: #00f0ff;
                                font-size: pxToRem(12);
                                white-space: nowrap;
                            }
                            .content{
                                width: pxToRem(65);
                                display: inline-block;
                                color: #00f0ff;
                                font-size: pxToRem(12);
                                overflow: hidden;
                                white-space: nowrap;
                                .scorllText {
                                    display: inline-block;
                                    animation: textMove 2s linear infinite;
                                    animation-fill-mode: forwards;
                                }
                            }
                        }
                        .adjust_width{
                            width: pxToRem(115) !important;
                        }
                        .completionDate {
                            display: flex;
                            justify-content: flex-start;
                            .headline2 {
                                display: inline-block;
                                color: #00f0ff;
                                font-size: pxToRem(12);
                                white-space: nowrap;
                            }
                            .content{
                                width: pxToRem(65);
                                display: inline-block;
                                color: #00f0ff;
                                font-size: pxToRem(12);
                                overflow: hidden;
                                white-space: nowrap;
                                .scorllText {
                                    display: inline-block;
                                    animation: textMove 2s linear infinite;
                                    animation-fill-mode: forwards;
                                }
                            }
                        }
                        .margintx{
                            margin-top: pxToRem(10);
                        }
                    }
                }
            }
            .left_one_bottom {
                display: flex;
                flex-flow: column nowrap;
                margin: pxToRem(20) 0 0 pxToRem(80);
                height: 95%;
                overflow: hidden;
                pointer-events: auto;
                .left_one_bottom_item {
                    display: flex;
                    height: pxToRem(30);
                    max-height: pxToRem(120);
                    width: pxToRem(300);
                    line-height: pxToRem(30);
                    text-indent: 0.1rem;
                    border-bottom: 1px solid #3f5669;
                    // background-color: #203b53;
                    span:first-of-type {
                        display: block;
                        white-space: nowrap;
                        /* width: pxToRem(70); */
                        width: auto;
                        font-size: pxToRem(13);
                    }
                    span:last-of-type {
                        display: block;
                        width: pxToRem(200);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: pxToRem(13);
                    }
                    .bc {
                        height: pxToRem(30);
                        width: pxToRem(300);
                        position: absolute;
                        background: linear-gradient(
                            90deg,
                            #043d79 0%,
                            #062a3e 51%,
                            #043d79 100%
                        );
                        opacity: 0.3;
                        z-index: -1;
                    }
                }
            }
        }
        .left_two {
            display: flex;
            flex-flow: column nowrap;
            .left_two_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                margin-top: pxToRem(10);
                .left_two_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .left_two_top_title {
                    width: pxToRem(168);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_two_bottom {
                display: flex;
                flex-flow: column nowrap;
                margin: pxToRem(10) 0 0 pxToRem(70);
                overflow: hidden;
                height: 95%;
                pointer-events: auto;
                .left_two_bottom_item {
                    display: flex;
                    flex: 1;
                    justify-content: flex-start;
                    height: pxToRem(30);
                    width: pxToRem(320);
                    font-size: pxToRem(13);
                    line-height: pxToRem(30);
                    text-indent: 0.1rem;
                    border-bottom: 1px solid #3f5669;
                    // background-color: #06243f;
                    .bc {
                        height: pxToRem(30);
                        width: pxToRem(320);
                        position: absolute;
                        background: linear-gradient(
                            90deg,
                            #043d79 0%,
                            #062a3e 51%,
                            #043d79 100%
                        );
                        opacity: 0.3;
                        z-index: -1;
                    }
                    .left_two_bottom_title {
                        width: pxToRem(180);
                        color: #c4ddeb;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .left_two_bottom_date {
                        // width: pxToRem(140);
                        width: pxToRem(160);
                        margin-left: 0.4rem;
                        color: #748595;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
        .left_three {
            display: flex;
            flex-flow: column nowrap;
            .left_three_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                margin-top: pxToRem(10);
                .left_three_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .left_three_top_title {
                    width: pxToRem(195);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
                .item_tab {
                    cursor: pointer;
                    width: pxToRem(50);
                    height: pxToRem(22);
                    margin-top: pxToRem(3);
                    pointer-events: auto;
                    img {
                        width: pxToRem(43);
                        height: pxToRem(5);
                    }
                }
            }
            .left_three_bottom {
                display: flex;
                flex-flow: column nowrap;
                margin: pxToRem(5) 0 0 pxToRem(65);
                height: 100%;
                width: 95%;
                pointer-events: auto;
                .left_three_item {
                    display: flex;
                    justify-content: space-between;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: pxToRem(280);
                    margin-bottom: pxToRem(10);
                    .left_three_first_rank {
                        margin-left: pxToRem(20);
                        color: #fcfcfe;
                        font-weight: bolder;
                        font-style: oblique;
                        font-size: pxToRem(13);
                    }
                    .left_three_first_type {
                        text-align: left;
                        font-size: pxToRem(13);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                    }
                    .left_three_first_count {
                        font-size: pxToRem(13);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #75808a;
                    }
                }
            }
        }
    }
    .subPage-left .item:first-of-type {
        background-image: url("../../assets/images/ags/index/left_frist_panel.png") !important;
        background-size: 100% 120%;
        height: 34%;
    }
    .subPage-left .item:nth-child(2) {
        background-image: url("../../assets/images/ags/index/left_frist_panel.png") !important;
        background-size: 100% 120%;
        height: 30%;
    }
    .subPage-left .item:last-of-type {
        background-image: url("../../assets/images/ags/index/left_three_tab.png") !important;
        height: 30%;
    }
    .subPage-right .item {
        background-image: url("../../assets/images/ags/index/right_panel.png") !important;
    }
    .subPage-right .item:first-of-type {
        height: pxToRem(340) !important;
    }
    .center1 {
        pointer-events: none !important;
    }
    .center {
        pointer-events: auto;
        width: pxToRem(950);
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        .top1 {
            width: 100%;
            height: 62%;
            padding: pxToRem(6);
            box-sizing: border-box;
            margin-bottom: pxToRem(5);
            pointer-events: none;
        }
        .top {
            width: 100%;
            height: 62%;
            position: relative;
            padding: pxToRem(6);
            box-sizing: border-box;
            margin-bottom: pxToRem(5);
            .img {
                position: relative;
                width: 100%;
                height: 100%;
                // border: pxToRem(1) solid #4ae1ff;
                box-sizing: border-box;
                overflow: hidden;
                /deep/ .content {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    /deep/ .el-carousel .el-carousel--horizontal {
                        width: 100% !important;
                    }

                    .img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: relative;
                    }
                }
                .videoDeviceFlag {
                    width: pxToRem(300);
                    max-height: pxToRem(350);
                    position: absolute;
                    right: pxToRem(20);
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 10;
                    transition: all 0.5s ease-in;

                    .imgBtn {
                        width: pxToRem(39);
                        height: pxToRem(100);
                        position: absolute;
                        left: pxToRem(-39);
                        top: 50%;
                        transform: translateY(-50%);
                        background-image: url("../../assets/images/ags/index/md-bc.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        display: flex;
                        justify-content: center;
                        align-content: center;
                        flex-direction: column;
                        text-align: center;
                        cursor: pointer;
                        color: #fff;
                        .icon {
                            position: absolute;
                            left: 5px;
                            top: 50%;
                            transform: translateY(-50%);
                            display: block;
                            width: pxToRem(14);
                            height: pxToRem(14);
                        }

                        span {
                            width: pxToRem(15);
                            font-size: pxToRem(14);
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #ffffff;
                            margin-left: pxToRem(30);
                        }
                    }
                    .device-box {
                        width: pxToRem(300);
                        max-height: pxToRem(350);
                        overflow-y: auto;
                        &::-webkit-scrollbar {
                            width: 6px;
                        }
                        /*滚动槽*/
                        &::-webkit-scrollbar-track {
                            box-shadow: inset 0 0 6px rgba(49, 211, 243, 0.8);
                            -webkit-box-shadow: inset 0 0 6px rgba(49, 211, 243, 0.8);
                            border-radius: 1px;
                        }
                        /* 滚动条滑块 */
                        &::-webkit-scrollbar-thumb {
                            border-radius: 1px;
                            background: rgba(0, 0, 0, 0.1);
                            box-shadow: inset 0 0 6px rgba(49, 211, 243, 0.8);
                            -webkit-box-shadow: inset 0 0 6px rgba(49, 211, 243, 0.8);
                        }
                        &::-webkit-scrollbar-thumb:window-inactive {
                            background: rgba(49, 211, 243, 0.8);
                        }
                        .device-list {
                            width: 100%;
                            .device-item {
                                position: relative;
                                width: 100%;
                                height: pxToRem(35);
                                line-height: pxToRem(35);
                                background-color: rgba(2, 36, 85, 0.66);
                                //margin-bottom: pxToRem(3);
                                font-size: pxToRem(16);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #fff;
                                cursor: pointer;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 0 pxToRem(38);
                                box-sizing: border-box;
                                .name {
                                    flex: 1;
                                    height: pxToRem(35);
                                    line-height: pxToRem(35);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                                .active {
                                    width: pxToRem(16);
                                    height: pxToRem(16);
                                    min-width: pxToRem(16);
                                    display: block;
                                }
                                .deviceStatus {
                                    position: absolute;
                                    left: pxToRem(25);
                                    top: 50%;
                                    transform: translateY(-50%);
                                    width: pxToRem(8);
                                    height: pxToRem(8);
                                    border-radius: 50%;
                                    z-index: 10;
                                    &.green {
                                        background: rgba(0, 255, 0, 1);
                                    }
                                    &.red {
                                        background: rgba(255, 0, 0, 1);
                                    }
                                }
                            }
                        }
                    }
                }
                .ul {
                    width: 95%;
                    //margin: 0 auto;
                    // margin-top: 20px;
                    // height: pxToRem(700);
                    list-style: none;
                    overflow-y: auto;

                    .li {
                        position: relative;
                        width: 100%;
                        height: pxToRem(100);
                        margin-bottom: pxToRem(15);
                        cursor: pointer;
                        border: pxToRem(1) solid #f8f7f9;
                        box-sizing: border-box;
                        &:hover {
                            .operationBtn {
                                visibility: visible;
                            }
                        }
                        .cover {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }

                        .infoBox {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: pxToRem(10) pxToRem(20);
                            box-sizing: border-box;
                            background: rgba(34, 58, 104, 0.39);
                            z-index: 10;

                            .name {
                                width: 50%;
                                min-width: 50%;
                                font-size: pxToRem(12);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #ffffff;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            .status {
                                font-size: pxToRem(12);
                                font-family: Source Han Sans CN;
                                font-weight: 400;

                                &.green {
                                    color: #2dc27b;
                                }

                                &.red {
                                    color: #f33f3f;
                                }
                            }
                        }

                        .operationBtn {
                            position: absolute;
                            top: 0;
                            left: 0;
                            background: rgba(34, 58, 104, 0.39);
                            width: 100%;
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            padding: pxToRem(4) pxToRem(10);
                            box-sizing: border-box;
                            z-index: 10;
                            visibility: hidden;

                            img {
                                display: block;
                                width: pxToRem(16);
                                height: pxToRem(16);
                                margin-left: pxToRem(6);
                            }
                        }
                    }
                }

                .ul::-webkit-scrollbar {
                    width: pxToRem(5);
                }

                /*滚动槽*/
                .ul::-webkit-scrollbar-track {
                    box-shadow: inset 0 0 pxToRem(5) rgba(0, 0, 0, 0.1);
                    -webkit-box-shadow: inset 0 0 pxToRem(5) rgba(0, 0, 0, 0.1);
                    border-radius: 10px;
                }

                /* 滚动条滑块 */
                .ul::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    background: rgba(0, 0, 0, 0.1);
                    box-shadow: inset 0 0 pxToRem(5) rgba(0, 0, 0, 0.1);
                    -webkit-box-shadow: inset 0 0 pxToRem(5) rgba(0, 0, 0, 0.1);
                }

                .ul::-webkit-scrollbar-thumb:window-inactive {
                    background: rgba(255, 0, 0, 0.4);
                }
            }
            #map {
                width: 100%;
                height: 100%;
            }
        }
        .bottom {
            width: 100%;
            height: 38%;
            background-image: url("../../assets/images/ags/index/bottom_panel.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: flex-start;
            pointer-events: auto;
            .bottom_left_data {
                display: flex;
                justify-content: flex-start;
                flex-flow: row wrap;
                width: pxToRem(460);
                margin: pxToRem(40) pxToRem(20) pxToRem(20) pxToRem(70);
                .bottom_left_item {
                    display: flex;
                    justify-content: flex-start;
                    .bottom_left_data_icon {
                        margin-top: pxToRem(20);
                        img {
                            width: pxToRem(58);
                            height: pxToRem(58);
                        }
                    }
                    .bottom_left_data_text {
                        margin: pxToRem(5) pxToRem(20) pxToRem(20) pxToRem(30);
                        .bottom_left_data_count {
                            font-family: "lcd regular";
                            letter-spacing: 2px;
                            color: #00f0ff;
                            font-size: pxToRem(36);
                            margin-left: pxToRem(10);
                        }
                        .bottom_left_data_unit {
                            color: #b4cbd8;
                            font-size: pxToRem(17);
                        }
                    }
                }
                .bottom_left_line {
                    margin: pxToRem(15) pxToRem(25) 0 0;
                    width: pxToRem(6);
                    height: pxToRem(60);
                    border-right: 2px solid #0099ff;
                }
                .bottom_left2_line {
                    margin: pxToRem(15) pxToRem(25) 0 pxToRem(16);
                    width: pxToRem(6);
                    height: pxToRem(60);
                    border-right: 2px solid #0099ff;
                }
            }
            .bottom_left_echart {
                width: pxToRem(350);
                height: 70.5%;
                margin: pxToRem(40) pxToRem(20) pxToRem(20) 0;
                background-image: url("../../assets/images/ags/index/echart_panel.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-flow: column nowrap;
                .bottom_left_echart_top {
                    display: flex;
                    justify-content: flex-start;
                    margin: pxToRem(20) 0 0 pxToRem(20);
                    .bottom_left_echart_icon {
                        margin: pxToRem(5) pxToRem(5) 0 0;
                        width: pxToRem(12);
                        height: pxToRem(12);
                        background: #0099ff;
                    }
                    .bottom_left_echart_title {
                        font-size: pxToRem(16);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                    }
                    .tab_groups {
                        display: flex;
                        justify-content: flex-start;
                        width: pxToRem(100);
                        margin-left: pxToRem(60);
                        .item_tab {
                            cursor: pointer;
                            width: pxToRem(50);
                            height: pxToRem(22);
                            margin-top: pxToRem(2);

                            img {
                                width: pxToRem(43);
                                height: pxToRem(5);
                            }
                        }
                    }
                }
                .bottom_left_echart_bottom {
                    display: flex;
                    justify-content: flex-start;
                    height: 80%;
                    width: 100%;
                    .left_echart {
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        height: 90%;
                        width: 55%;
                        #left_echart_chart {
                            height: pxToRem(110);
                            width: pxToRem(200);
                        }
                        .center_bg {
                            position: absolute;
                            height: pxToRem(130);
                            width: pxToRem(210);
                            background-image: url("../../assets/images/ags/index/cicle_bg.png");
                            background-repeat: no-repeat;
                            background-size: 50% 80%;
                            background-position: center;
                            z-index: -1;
                            animation: turn 4s linear infinite;
                        }
                        .left_echart_text {
                            width: 90%;
                            height: pxToRem(20);
                            text-align: center;
                            margin-left: pxToRem(20);
                            .text_1 {
                                font-size: pxToRem(10);
                                // transform: scale(0.88);
                                // transform-origin: 0 0;
                                white-space: nowrap;
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #d8f0fe;
                            }
                            .text_2 {
                                font-size: pxToRem(14);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #d8f0fe;
                            }
                            .text_3 {
                                font-size: pxToRem(8);
                                transform: scale(0.42);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #d8f0fe;
                            }
                        }
                    }
                    .right_echart {
                        height: 90%;
                        width: pxToRem(140);
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        #right_echart_chart {
                            height: pxToRem(110);
                            width: pxToRem(150);
                        }
                        .right_echart_text {
                            width: 100%;
                            height: pxToRem(20);
                            // margin-top: pxToRem(15);
                            text-align: left;
                            text-indent: pxToRem(10);
                            .text_1 {
                                font-size: pxToRem(10);
                                // transform: scale(0.88);
                                // transform-origin: 0 0;
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #d8f0fe;
                            }
                            .text_2 {
                                font-size: pxToRem(14);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #d8f0fe;
                            }
                            .text_3 {
                                font-size: pxToRem(8);
                                transform: scale(0.42);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #d8f0fe;
                            }
                        }
                    }
                }
            }
        }
    }
    .subPage-right {
        .right_one {
            display: flex;
            flex-flow: column nowrap;
            height: 100vh;
            .right_one_top {
                display: flex;
                justify-content: space-between;
                width: 73%;
                margin-left: pxToRem(60);
                margin-top: pxToRem(10);
                .right_one_top_icon {
                    width: pxToRem(150);
                    display: flex;
                    justify-content: space-between;
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                    .right_one_top_title {
                        width: pxToRem(220);
                        height: pxToRem(22);
                        font-size: pxToRem(22);
                        font-family: SourceHanSansCN-Medium;
                        line-height: pxToRem(25);
                        color: #a8dfff;
                        margin-left: pxToRem(10);
                    }
                }
                .Dropdown {
                    pointer-events: auto;
                }
            }
            .right_one_bottom {
                display: flex;
                flex-flow: column nowrap;
                width: pxToRem(330);
                height: 75%;
                background-image: url("../../assets/images/ags/index/right_one_panel.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: pxToRem(50);
                margin-top: pxToRem(8);
                .right_one_item {
                    display: flex;
                    flex: 1;
                    justify-content: flex-start;
                    padding: pxToRem(23) pxToRem(15) 0 pxToRem(15);
                    margin-top: pxToRem(-15);
                    .right_one_item_left {
                        display: flex;
                        justify-content: flex-start;
                        .right_one_item_icon {
                            img {
                                width: pxToRem(53);
                                height: pxToRem(38);
                            }
                        }
                        .right_one_item_point {
                            padding: pxToRem(10);
                            img {
                                width: pxToRem(9);
                                height: pxToRem(14);
                            }
                        }
                    }
                    .right_one_item_right {
                        display: flex;
                        justify-content: space-between;
                        .right_one_item_one {
                            width: pxToRem(65);
                            margin-left: pxToRem(15);
                            .right_one_item_line {
                                // margin: pxToRem(10) 0 0 pxToRem(10);
                                width: pxToRem(40);
                                height: pxToRem(1);
                            }
                            .right_one_item_count {
                                display: flex;
                                flex-flow: column;
                                // justify-content: space-between;
                                // height: pxToRem(40);
                                .right_one_item_value {
                                    height: pxToRem(25);
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                .right_one_item_unit {
                                    white-space: nowrap;
                                    margin-top: pxToRem(-5);
                                }
                            }
                        }
                    }
                }
            }
        }
        .right_two {
            display: flex;
            flex-flow: column nowrap;
            .right_two_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(60);
                margin-top: pxToRem(10);
                .right_two_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .right_two_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_two_bottom {
                display: flex;
                justify-content: flex-start;
                width: 80%;
                margin-left: pxToRem(40);
                .right_two_bottom_left {
                    display: flex;
                    flex-flow: row wrap;
                    width: pxToRem(98);
                    height: pxToRem(125);
                    margin: pxToRem(20) pxToRem(5) 0 0;
                    .right_two_bottom_item {
                        display: flex;
                        flex-flow: column nowrap;
                        .right_two_bottom_icon {
                            .count {
                                display: inline-block;
                                margin-left: pxToRem(20);
                                font-family: "led regular";
                                font-size: pxToRem(36);
                                color: #00f0ff;
                                width: pxToRem(35);
                                line-height: pxToRem(32);
                                overflow: hidden;
                                .scorllText {
                                    display: inline-block;
                                    animation: textMove 4s linear infinite;
                                    animation-fill-mode: forwards;
                                }
                            }
                            img {
                                width: pxToRem(32);
                                height: pxToRem(32);
                            }
                        }
                        .right_two_bottom_unit {
                            font-size: pxToRem(12);
                            color: #97a6b5;
                            margin: 0 0 0 pxToRem(5);
                        }
                    }
                }
                .right_two_bottom_right {
                    display: flex;
                    flex-flow: column nowrap;
                    width: pxToRem(230);
                    height: pxToRem(140);
                    background-image: url("../../assets/images/ags/index/right_two_panel.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin: pxToRem(10) 0 0 0;
                    pointer-events: auto;
                    .right_two_bottom_top {
                        display: flex;
                        justify-content: flex-start;
                        margin: pxToRem(10) 0 pxToRem(10) pxToRem(12);
                        .name {
                            width: pxToRem(85);
                            font-size: pxToRem(16);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                            white-space: nowrap;
                        }
                        .job {
                            width: pxToRem(55);
                            text-align: left;
                            margin: pxToRem(4) 0 0 pxToRem(6);
                            font-size: pxToRem(12);
                            white-space: nowrap;
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #8497a3;
                        }
                    }
                    .right_two_bottom_bottom {
                        display: flex;
                        justify-content: flex-start;
                        .icon {
                            margin: pxToRem(-5) 0 0 pxToRem(12);
                            img {
                                width: pxToRem(82);
                                height: pxToRem(88);
                            }
                        }
                        .introduction {
                            display: flex;
                            flex-flow: column nowrap;
                            .introduction_item {
                                .top {
                                    display: flex;
                                    justify-content: flex-start;
                                    margin-top: pxToRem(8);
                                    .icon {
                                        width: pxToRem(7);
                                        height: pxToRem(7);
                                        border-radius: 50%;
                                        background: #00f0ff;
                                    }
                                    .title {
                                        margin: pxToRem(-6) 0 0 pxToRem(8);
                                        font-size: pxToRem(12);
                                        font-family: Microsoft YaHei-Regular,
                                            Microsoft YaHei;
                                        font-weight: 400;
                                        color: #a8dfff;
                                        line-height: pxToRem(10);
                                    }
                                }
                                .bottom {
                                    width: pxToRem(102);
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    margin: pxToRem(5) 0 0 pxToRem(25);
                                    font-size: pxToRem(12);
                                    font-family: Microsoft YaHei-Regular,
                                        Microsoft YaHei;
                                    font-weight: 400;
                                    color: #a8dfff;
                                }
                            }
                            .introduction_item:last-of-type {
                                margin-top: pxToRem(10);
                            }
                        }
                    }
                }
            }
        }
        .right_three {
            display: flex;
            flex-flow: column nowrap;
            .right_three_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(60);
                margin-top: pxToRem(10);
                .right_three_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .right_three_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_three_bottom {
                display: flex;
                justify-content: flex-start;
                width: 80%;
                margin-left: pxToRem(40);
                .right_three_bottom_left {
                    display: flex;
                    flex-flow: row wrap;
                    width: pxToRem(98);
                    height: pxToRem(125);
                    margin: pxToRem(20) pxToRem(5) 0 0;
                    .right_three_bottom_item {
                        display: flex;
                        flex-flow: column nowrap;
                        .right_three_bottom_icon {
                            .count {
                                display: inline-block;
                                margin-left: pxToRem(20);
                                font-family: "led regular";
                                font-size: pxToRem(36);
                                color: #00f0ff;
                                width: pxToRem(35);
                                line-height: pxToRem(32);
                                overflow: hidden;
                                .scorllText {
                                    display: inline-block;
                                    animation: textMove 4s linear infinite;
                                    animation-fill-mode: forwards;
                                }
                            }
                            img {
                                width: pxToRem(32);
                                height: pxToRem(32);
                            }
                        }
                        .right_three_bottom_unit {
                            font-size: pxToRem(12);
                            color: #97a6b5;
                            margin: 0 0 0 pxToRem(5);
                        }
                    }
                }
                .right_three_bottom_right {
                    display: flex;
                    flex-flow: column nowrap;
                    width: pxToRem(230);
                    height: pxToRem(140);
                    background-image: url("../../assets/images/ags/index/right_two_panel.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin: pxToRem(10) 0 0 0;
                    pointer-events: auto;
                    .right_three_bottom_top {
                        display: flex;
                        justify-content: flex-start;
                        margin: pxToRem(10) 0 pxToRem(10) pxToRem(12);
                        .name {
                            width: pxToRem(85);
                            font-size: pxToRem(16);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                            white-space: nowrap;
                        }
                        .job {
                            width: pxToRem(55);
                            text-align: left;
                            margin: pxToRem(4) 0 0 pxToRem(6);
                            white-space: nowrap;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #8497a3;
                        }
                    }
                    .right_three_bottom_bottom {
                        display: flex;
                        justify-content: flex-start;
                        .icon {
                            margin: pxToRem(-5) 0 0 pxToRem(12);
                            img {
                                width: pxToRem(82);
                                height: pxToRem(88);
                            }
                        }
                        .introduction {
                            display: flex;
                            flex-flow: column nowrap;
                            .introduction_item {
                                .top {
                                    display: flex;
                                    justify-content: flex-start;
                                    margin-top: pxToRem(8);
                                    .icon {
                                        width: pxToRem(7);
                                        height: pxToRem(7);
                                        border-radius: 50%;
                                        background: #00f0ff;
                                    }
                                    .title {
                                        margin: pxToRem(-6) 0 0 pxToRem(8);
                                        font-size: pxToRem(12);
                                        font-family: Microsoft YaHei-Regular,
                                            Microsoft YaHei;
                                        font-weight: 400;
                                        color: #a8dfff;
                                        line-height: pxToRem(10);
                                    }
                                }
                                .bottom {
                                    width: pxToRem(102);
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    margin: pxToRem(5) 0 0 pxToRem(25);
                                    font-size: pxToRem(12);
                                    font-family: Microsoft YaHei-Regular,
                                        Microsoft YaHei;
                                    font-weight: 400;
                                    color: #a8dfff;
                                }
                            }
                            .introduction_item:last-of-type {
                                margin-top: pxToRem(10);
                            }
                        }
                    }
                }
            }
        }
    }

    /deep/ .carousel-box {
        .carousel-list {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            padding: pxToRem(0) pxToRem(15);
            box-sizing: border-box;

            .carousel-item {
                position: relative;
                flex: 1;
                min-width: 33.3%;
                text-align: center;
                padding: pxToRem(10) 0;
                box-sizing: border-box;

                &::after {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    content: "";
                    display: block;
                    width: pxToRem(1);
                    height: pxToRem(40);
                    background: #16aee0;
                    opacity: 0.55;
                    z-index: 1;
                }

                &:nth-of-type(3n) {
                    &::after {
                        display: none;
                    }
                }

                &:nth-of-type(1),
                &:nth-of-type(2),
                &:nth-of-type(3) {
                    border-bottom: pxToRem(1) solid rgba(22, 174, 224, 0.55);
                }

                &:last-of-type {
                    &::after {
                        display: none;
                    }
                }

                .num {
                    font-size: pxToRem(20);
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #01dff4;
                    text-shadow: 3px 9px 7px rgba(150, 150, 150, 0.3);
                }

                .text {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .name {
                        font-size: pxToRem(14);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #bcf0fe;
                    }

                    .unit {
                        font-size: pxToRem(12);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #01dff4;
                    }
                }
            }
        }
    }
    .fixed {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        // background: #101732;
        // opacity: 0.47;
        background: rgba(16, 23, 50, 0.47);
        display: flex;
        justify-content: center;
        align-items: center;
        /deep/ .ivu-tabs-bar {
            padding: 0 pxToRem(25);
            border-bottom: pxToRem(1) solid
                rgba(255, 255, 255, 0.2784313725490196);
            box-sizing: border-box;
            .ivu-tabs-tab {
                padding: pxToRem(8) 0;
                margin-right: pxToRem(16);
                font-size: pxToRem(14) !important;
            }
        }
        .modal {
            height: auto;
            width: pxToRem(270);
            background: #102144;
            .title {
                background: #0d447e;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                font-size: pxToRem(16);
                color: #fff;
                width: 100%;
                height: pxToRem(40);
                position: relative;
                .close {
                    width: pxToRem(15);
                    height: pxToRem(15);
                    position: absolute;
                    color: #0096ff;
                    top: pxToRem(12.5);
                    right: pxToRem(10);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    font-size: pxToRem(18);
                }
            }
            ul {
                list-style: none;
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                li {
                    width: pxToRem(250);
                    height: pxToRem(50);
                    padding: 0 pxToRem(25);
                    border-bottom: pxToRem(1) solid rgba(255, 255, 255, 0.4);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span {
                        color: #478de9;
                        font-size: pxToRem(14);
                        em {
                            color: #fff;
                            margin-right: pxToRem(5);
                        }
                    }
                }
            }
            .btns {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: pxToRem(60);
                button {
                    width: pxToRem(120);
                    height: pxToRem(40);
                    background: #478de9;
                    outline: none;
                    border: none;
                    border-radius: pxToRem(5);
                    color: #fff;
                    font-size: pxToRem(14);
                    cursor: pointer;
                }
            }
        }
        .fimmodal {
            width: pxToRem(760);
            height: pxToRem(500);
            background: #102144;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            .title {
                background: #0d447e;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                font-size: pxToRem(16);
                color: #fff;
                width: 100%;
                height: pxToRem(40);
                position: relative;
                .close {
                    width: pxToRem(15);
                    height: pxToRem(15);
                    position: absolute;
                    color: #0096ff;
                    top: pxToRem(12.5);
                    right: pxToRem(10);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    font-size: pxToRem(18);
                }
            }
            .chart {
                width: pxToRem(700);
                height: pxToRem(400);
                margin-top: pxToRem(30);
                background: #1e3282;
            }
        }
    }
}

/deep/ .el-carousel__container {
    height: pxToRem(580) !important;
}
@keyframes turn {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
/*文字无缝滚动*/
@keyframes textMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-60px);
    }
}
</style>
<style lang="scss">
/deep/ .bf-toolbar.bf-toolbar-bottom-float-right {
    transform: translate(0, 0) !important;
}
</style>

<style>
    .itemDiv1 {
        height: 3.4rem !important;
    }

    .itemDiv2 {
        height: 3.4rem !important;
    }

    .pointer-events_cursor {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .right_rf {
        position: relative;
    }

    .right_rf .right_rf_time {
        position: absolute;
        right: 0px;
        bottom: 0px;
        color: #94d8ff;
        font-size: .16rem;
        font-family: SourceHanSansCN-Medium;
        font-weight: 400;
    }
</style>
